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 github.com/MrRio/jsPDF/issues/91 — Andrzej Rehmann
– Andrzej Rehmann, Commented Mar 9, 2016 at 11:52
Solution by @amit-merin worked for me stackoverflow.com/questions/54126963/… — Murometz80
– Murometz80, Commented Jun 12, 2022 at 15:30
Solution by Amit Merin worked for me stackoverflow.com/questions/54126963/… — Murometz80
– Murometz80, Commented Jun 12, 2022 at 15:38

Marcello B. · Accepted Answer · 2019-08-26 05:42:39Z

36

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, 2019 at 5:42

Marcello B.

4,47011 gold badges48 silver badges72 bronze badges

answered Sep 22, 2014 at 7:23

Mihir

5143 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Alin Over a year ago

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.

nullpointer Over a year ago

How can I remove black background and improve output quality?

Windtalker Over a year ago

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

TechTurtle Over a year ago

This will not work for long image. If the image/content are more than one page.

Sunil Chaudhary Over a year ago

addHTML is not a function, I have added HTML2Canvas JS as well.. and even no such function in jspdf..

|

Bhinal Chauhan · Accepted Answer · 2017-03-28 08:46:34Z

17

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.

answered Mar 28, 2017 at 8:46

Bhinal Chauhan

2513 silver badges12 bronze badges

1 Comment

Usama Ahmed Over a year ago

But this method will not generate native PDF It will only convert image to pdf

masud_moni · Accepted Answer · 2019-10-22 09:19:50Z

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, 2019 at 9:19

masud_moni

1,30619 silver badges34 bronze badges

answered Jul 24, 2019 at 15:20

user3180664

3153 silver badges7 bronze badges

Comments

Adeel · Accepted Answer · 2018-05-10 11:19:50Z

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, 2018 at 11:19

Adeel

2,9977 gold badges27 silver badges38 bronze badges

answered May 10, 2018 at 9:35

rajesh yadav

215 bronze badges

3 Comments

rajesh yadav Over a year ago

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.

Aniruddha Over a year ago

Thanks. Although the generated pdf doesn't have the clearer font. Can this be fixed? or is it browser issue?

Aniruddha Over a year ago

Thanks. Although the generated pdf doesn't have the clearer font. Can this be fixed? or is it browser issue?

Syed Tabish Ali · Accepted Answer · 2022-09-07 07:02:41Z

0

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');

});

answered Sep 7, 2022 at 7:02

Syed Tabish Ali

3134 silver badges5 bronze badges

Comments

Kakanda Ali · Accepted Answer · 2023-09-07 05:43:15Z

-1

set option useCSS:true

in typescript: autoTable(doc, { html: '#mytable',useCss:true });

answered Sep 7, 2023 at 5:43

Kakanda Ali

1

1 Comment

Yunnosch Over a year ago

Welcome to Stack Overflow! While this code may solve the question, including an explanation of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please edit your answer to add explanations and give an indication of what limitations and assumptions apply.

JCristobal · Accepted Answer · 2016-04-22 11:43:08Z

-13

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

answered Apr 22, 2016 at 11:43

JCristobal

252 bronze badges

Collectives™ on Stack Overflow

Exporting PDF with jspdf not rendering CSS

7 Answers 7

12 Comments

1 Comment

Comments

3 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

12 Comments

1 Comment

Comments

3 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related