Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Angular Example Text #2983

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Angular Example Text #2983

wants to merge 7 commits into from

Conversation

dhairyagada
Copy link

PR addressed towards #2930

Change -
Added an Angular Example in /Examples/Angular

image


### 1. Install jsPDF

`npm i jspdf @types/jspdf`
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@types/jspdf is no longer required. jsPDF comes with its own typings file.

### 2. Import jsPDF in the component file

```ts
import { jsPDF} from "jspdf"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

space after jsPDF ;)

`npm i`

### 2. Run
`ng serve`
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

probably better to run npm start

doc.text(this.text,10,10)

//Convert Document to a Blob
var blobPDF = new Blob([ doc.output() ], { type : 'application/pdf'});
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can do doc.output('blob') instead.

@HackbrettXXX
Copy link
Collaborator

Thanks for this PR :)
It would also be really awesome if you could try the html function and marking canvg as external like I described in my comment.

@dhairyagada
Copy link
Author

Hey @HackbrettXXX glad to contribute to this project, I've made the requested changes. Also, I'll be adding an HTML as well as canvg example soon :)
Meanwhile, it would be great if you can add the hacktoberfest-accepted label to this PR so that it counts towards my hacktoberfest contributions.
Thanks!

@HackbrettXXX
Copy link
Collaborator

Alright, thanks :)

@dhairyagada
Copy link
Author

@HackbrettXXX I've implemented the html to pdf example, have a look

image

Copy link
Collaborator

@HackbrettXXX HackbrettXXX left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks really awesome! Could you either add the canvg example oder remove the "Canvg" button?

@@ -0,0 +1,15 @@
{
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

don't think we should check in the .vscode files

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure will change that

@dhairyagada
Copy link
Author

@HackbrettXXX I'll try to add a Canvg example by next week

@HackbrettXXX
Copy link
Collaborator

Alright, thanks ;)

@dhairyagada
Copy link
Author

Hey @HackbrettXXX , I am trying the canvg example, and using the method Canvg.from for it, here's my code

`

var pdf = new jsPDF('p', 'pt', 'c1');
var c = pdf.canvas;
c.width = 1000;
c.height = 500;
var ctx = c.getContext('2d');
ctx.ignoreClearRect = true;
ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, 1000, 700);    
Canvg.from(c , document.getElementById('graph').outerHTML, {
  ignoreMouse: true,
  ignoreAnimation: true,
  ignoreDimensions: true
})

`

However, I'm getting an error when I pass c to Canvg.from method that
Argument of type '{ pdf: jsPDF; width: number; height: number; getContext(type?: string): Context2d; style: any; }' is not assignable to parameter of type 'RenderingContext2D'.

@HackbrettXXX
Copy link
Collaborator

I think you should pass the ctx not the canvas to Canvg.from, although I'm not sure this will work. We should probably improve the typings file in this regard. Let me know if passing the context works.

@kurtwilbies
Copy link

Any progress?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants