CODEWITHSUNDEEP
jquerycssrenderingjspdf
Alin
Alin

Reputation: 1228

Exporting PDF with jspdf not rendering CSS

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

Upvotes: 44

Views: 163723

Answers (7)

Kakanda Ali
Kakanda Ali

Reputation: 1

set option useCSS:true

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

Upvotes: -1

Syed Tabish Ali
Syed Tabish Ali

Reputation: 313

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

});

Upvotes: 0

user3180664
user3180664

Reputation: 315

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!

Upvotes: 7

Mihir
Mihir

Reputation: 514

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()

Upvotes: 36

rajesh yadav
rajesh yadav

Reputation: 21

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

Upvotes: 1

Bhinal Chauhan
Bhinal Chauhan

Reputation: 251

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.

Upvotes: 17

JCristobal
JCristobal

Reputation: 25

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

Upvotes: -13

Related Questions