Exporting PDF with jspdf not rendering CSS

Question

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 the CSS in the exported PDF and if I have an image in the page I am exporting, the PDF returns blank...

Does anyone know a way to fix this ?

Here is a jsfiddle showing it's not rendering the CSS

And my script

$(document).ready(function() {
$('#export').click(function(){
var d = new Date().toISOString().slice(0, 19).replace(/-/g, ""),
        filename = 'financiar_' + d + '.pdf',
        pdf = new jsPDF('p', 'pt', 'letter'),
        specialElementHandlers = {
          '#editor': function( element, renderer ) {
              return true;
          }
    };
    pdf.fromHTML(
          $('.export').get(0) // HTML element
        , 25  // x coord
        , 25  // y coord
        , {
              'width': 550 // was 7.5, max width of content on PDF
            , elementHandlers: specialElementHandlers
        }
    );
    pdf.save( filename );
})
});

github issue with some advice on this is here https://github.com/MrRio/jsPDF/issues/91 — Andrzej Rehmann, Mar 09 '16 at 11:52
Solution by @amit-merin worked for me https://stackoverflow.com/questions/54126963/jspdf-html2canvas-not-loaded-while-using-new-html-method/54180160#54180160 — Murometz80, Jun 12 '22 at 15:30
Solution by Amit Merin worked for me https://stackoverflow.com/questions/54126963/jspdf-html2canvas-not-loaded-while-using-new-html-method/54180160#54180160 — Murometz80, Jun 12 '22 at 15:38

score 35 · Answer 1 · edited Aug 26 '19 at 05:42

35

As I know jsPDF is not working with CSS and the same issue I was facing.

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 other code):

 var pdf = new jsPDF('p', 'pt', 'letter');
 pdf.addHTML($('#ElementYouWantToConvertToPdf')[0], function () {
     pdf.save('Test.pdf');
 });

Best of Luck!

Edit: Refer to this line in case you didn't find .addHTML()

edited Aug 26 '19 at 05:42

Marcello B.

4,177
11
45
65

answered Sep 22 '14 at 07:23

Mihir

504
3
11

Hmm, I'll be looking into it, but as far as I can see, it only outputs the CSS1 from the stylesheet. Hmm, I'm digging into it a bit. – Alin Sep 23 '14 at 07:25
11

How can I remove black background and improve output quality? – nullpointer Mar 30 '16 at 10:58
Hi for some reason my printed PDF only has half of it, left part. I followed your instructions by adding the scripts, using pdf.addHTML() instead of pdf.fromHTML(). Any hint? Thanks – Windtalker Apr 21 '16 at 21:05
6

This will not work for long image. If the image/content are more than one page. – TechTurtle Jul 27 '16 at 19:27
@mihir Please, it worked with me, but there are problems with Arabic language formate! Any help – Hana90 Feb 06 '17 at 09:46
@Hana90 What's the issue? – Mihir Feb 06 '17 at 09:50
such like this issue http://stackoverflow.com/questions/26701878/convert-html-page-containing-arabic-characters-to-pdf-using-flyingsaucer – Hana90 Feb 06 '17 at 09:58
Thanks, I can handle it by create image within canvas containing Arabic text, then when converting to pdf, there is image rather than text :) such like this example – Hana90 Feb 06 '17 at 11:49
3

addHTML is not a function, I have added HTML2Canvas JS as well.. and even no such function in jspdf.. – Sunil Chaudhary May 19 '17 at 07:57
Do you know how to fix the problem if pdf file look blurry? I used the exact same code from the answer above. The file is generated but looks blurry. – espresso_coffee Dec 21 '18 at 17:32
Not sure but can you try this another HTML structure because maybe it can be from html structure? – Mihir Jan 09 '19 at 06:01
@nullpointer, Add the background-color:white to the element's css you'd like to export. – fanjieqi Apr 02 '20 at 03:00

score 17 · Answer 2 · answered Mar 28 '17 at 08:46

jspdf does not work with css but it can work along with html2canvas. You can use jspdf along with html2canvas.

include these two files in script on your page :

<script type="text/javascript" src="html2canvas.js"></script>
  <script type="text/javascript" src="jspdf.min.js"></script>
  <script type="text/javascript">
  function genPDF()
  {
   html2canvas(document.body,{
   onrendered:function(canvas){

   var img=canvas.toDataURL("image/png");
   var doc = new jsPDF();
   doc.addImage(img,'JPEG',20,20);
   doc.save('test.pdf');
   }

   });

  }
  </script>

You need to download script files such as https://github.com/niklasvh/html2canvas/releases https://cdnjs.com/libraries/jspdf

make clickable button on page so that it will generate pdf and it will be seen same as that of original html page.

<a href="javascript:genPDF()">Download PDF</a>

It will work perfectly.

But this method will not generate native PDF It will only convert image to pdf — Usama Ahmed, Aug 30 '23 at 12:29

score 7 · Answer 3 · edited Oct 22 '19 at 09:19

7

Slight change to @rejesh-yadav wonderful answer.

html2canvas now returns a promise.

html2canvas(document.body).then(function (canvas) {
    var img = canvas.toDataURL("image/png");
    var doc = new jsPDF();
    doc.addImage(img, 'JPEG', 10, 10);
    doc.save('test.pdf');        
});

Hope this helps some!

edited Oct 22 '19 at 09:19

masud_moni

1,121
16
33

answered Jul 24 '19 at 15:20

user3180664

185
2
6

score 1 · Answer 4 · edited May 10 '18 at 11:19

1

You can get the example of css implemented html to pdf conversion using jspdf on following link: JSFiddle Link

This is sample code for the jspdf html to pdf download.

$('#print-btn').click(() => {
    var pdf = new jsPDF('p','pt','a4');
    pdf.addHTML(document.body,function() {
        pdf.save('web.pdf');
    });
})

edited May 10 '18 at 11:19

Adeel

2,901
7
24
34

answered May 10 '18 at 09:35

rajesh yadav

21
5

It could be because in fiddler we do not have much access change background but if you could implement the same on your code you can change the background with css properties. – rajesh yadav Mar 08 '19 at 06:19
Thanks. Although the generated pdf doesn't have the clearer font. Can this be fixed? or is it browser issue? – Aniruddha Jun 11 '20 at 12:03
Thanks. Although the generated pdf doesn't have the clearer font. Can this be fixed? or is it browser issue? – Aniruddha Jun 11 '20 at 12:03

score 0 · Answer 5 · answered Sep 07 '22 at 07:02

This is sample what I used to add external CSS in HTML, I have external CSS file and link to HTML as normal and get the main element in javascript file then generate the pdf through following code.

htmlString = document.getElementById("main");
pdf.addHTML(htmlString, function () {
   pdf.save('Test.pdf');

});

score -13 · Answer 6 · answered Apr 22 '16 at 11:43

-13

To remove black background only add background-color: white; to the style of

answered Apr 22 '16 at 11:43

JCristobal

27
2

Exporting PDF with jspdf not rendering CSS

6 Answers6

Linked