question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Angular+jspdf: css was not applied

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:10

github_iconTop GitHub Comments

3reactions
pierre03commented, Nov 17, 2017

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.

0reactions
saimzishancommented, Jun 16, 2019

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:

<button (click)=“download()”>download </button>

Read more comments on GitHub >

github_iconTop Results From Across the Web

Exporting PDF with jspdf not rendering CSS - Stack Overflow
To solve this issue, I used Html2Canvas. Just Add HTML2Canvas JS and then use pdf.addHTML() instead of pdf.fromHTML() . Here's my code (no...
Read more >
Angular+jspdf: css was not applied · Issue #1518 - GitHub
I use Angular and nodejs, i want to export the html file into a pdf report, but it doesn't work correctly. Are you...
Read more >
Exporting PDF with jspdf not rendering CSS - SyntaxFix
I am using jspdf.debug.js to export different data from a website but there are a few problems, I can't get it to render...
Read more >
jsPDF HTML TO PDF CSS Tutorial - YouTube
Angular 9 HTML to PDF Using jsPDF and HTML2Canvas Library 2020 · Complete Responsive Blooger Website Using HTML/ CSS · CONVERT HTML To...
Read more >
jsPDF table - CodePen
About CSS Base. It's a common practice to apply CSS to a page that styles elements such that they are consistent across all...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found