Jspdf: Angular+jspdf: css was not applied

Created on 17 Nov 2017  Â·  10Comments  Â·  Source: MrRio/jsPDF

I use Angular and nodejs, i want to export the html file into a pdf report, but it doesn't work correctly.

Are you using the latest version of jsPDF?
Yes, with gn-cli, i got the latest version
Have you tried using jspdf.debug.js?
No
Steps to reproduce

import * as jsPDF from 'jspdf';
import * as html2canvas from 'html2canvas';

function export:
const pdf = new jsPDF('p', 'pt', 'a4');
html2canvas(document.body).then((canvas)=>{
   pdf.fromHTML(document.body, 10, 10, {pagesplit: true}, () => {
       pdf.save('export.pdf');
   }
});

What I saw
The file is created, but not in good format.

What I expected
The same html page in pdf file.

Most helpful comment

Hello,

Thank you for your reply, maybe we should use the function addHtml for html with css, but when i tried to use addHtml, there are always some errors.
Can you give me an exemple for Angular 4 + jsPDF, please?

On 17 Nov 2017, at 20:55, Aras Abbasi notifications@github.com wrote:

FromHtml does support only basic HTML code and few css codes

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub https://github.com/MrRio/jsPDF/issues/1518#issuecomment-345349853, or mute the thread https://github.com/notifications/unsubscribe-auth/ARPv9K6VfPJJ3Z0W0f0N52J506q3c6gnks5s3eSygaJpZM4Qh6Ku.

All 10 comments

For information, i have added the js libs in .angular-cli.json

../node_modules/jspdf/dist/jspdf.min.js
../node_modules/html2canvas/dist/html2canvas.js

FromHtml does support only basic HTML code and few css codes

Hello,

Thank you for your reply, maybe we should use the function addHtml for html with css, but when i tried to use addHtml, there are always some errors.
Can you give me an exemple for Angular 4 + jsPDF, please?

On 17 Nov 2017, at 20:55, Aras Abbasi notifications@github.com wrote:

FromHtml does support only basic HTML code and few css codes

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub https://github.com/MrRio/jsPDF/issues/1518#issuecomment-345349853, or mute the thread https://github.com/notifications/unsubscribe-auth/ARPv9K6VfPJJ3Z0W0f0N52J506q3c6gnks5s3eSygaJpZM4Qh6Ku.

I have no experience with angularJS.

@pierre03 were you able to do it ?

i tried to use the addimage function to add the capture into the pdf, it works, but the image is very blurry.

is there any parameters that i should optimize to get the better quality?

Maybe half pixel problem... so maybe changing position..

@pierre03 have you managed to solve your issue and could you share working sample.
BTW do we have to use html2canvas to export div with list of rows?
Thanks

I have done it, after doing lot of R&D , their are few steps to follow as below : Install :

npm install jspdf --save

typings install dt~jspdf --global --save

npm install @types/jspdf --save
Add following in angular-cli.json:

"scripts": [ "../node_modules/jspdf/dist/jspdf.min.js" ]
html:

Was this page helpful?
0 / 5 - 0 ratings

Related issues

palmoni picture palmoni  Â·  4Comments

yankeeBrit picture yankeeBrit  Â·  3Comments

allenksun picture allenksun  Â·  3Comments

baluMallisetty picture baluMallisetty  Â·  4Comments

NoFootDancer picture NoFootDancer  Â·  3Comments