I have started making some demos using jspdf. I have a html file and my css is in external file.

I have written the below code to generate my pdf

$('#pdfButton').on('click', function(){

   var pdf = new jsPDF('p','in','letter')
   , source = $('#main')[0]
   , specialElementHandlers = {
      '#bypassme': function(element, renderer){
      return true
      }
   }

  pdf.fromHTML(
     source // HTML string or DOM elem ref.
      , 0.5 // x coord
      , 0.5 // y coord
      , {
            'width':700 // max width of content on PDF
            , 'elementHandlers': specialElementHandlers
       }
   )
   pdf.output('dataurl');

   });


});

where main is the id of the div whose content I want to export as pdf. The content is exporting as pdf but not the entire content(the pdf gets cut). It can be dynamic content. Also the css I have in external files are not getting applied , styles like table-row, background-color, etc are not getting applied.

How can I get my external css applied to the pdf before it is generated? Is it even possible with jsPDF..? Any suggestions please.

Thanks in advance

I have started making some demos using jspdf. I have a html file and my css is in external file.

I have written the below code to generate my pdf

$('#pdfButton').on('click', function(){

   var pdf = new jsPDF('p','in','letter')
   , source = $('#main')[0]
   , specialElementHandlers = {
      '#bypassme': function(element, renderer){
      return true
      }
   }

  pdf.fromHTML(
     source // HTML string or DOM elem ref.
      , 0.5 // x coord
      , 0.5 // y coord
      , {
            'width':700 // max width of content on PDF
            , 'elementHandlers': specialElementHandlers
       }
   )
   pdf.output('dataurl');

   });


});

where main is the id of the div whose content I want to export as pdf. The content is exporting as pdf but not the entire content(the pdf gets cut). It can be dynamic content. Also the css I have in external files are not getting applied , styles like table-row, background-color, etc are not getting applied.

How can I get my external css applied to the pdf before it is generated? Is it even possible with jsPDF..? Any suggestions please.

Thanks in advance

• javascript
• html
• css
• jspdf

2 Answers 2

As far as I know jsPDF doesnt take external css. It infact doesnt even take inline css. It is currently not suitable to use jspdf for converting html to pdf.

Hope this helps.

Bear in mind that when you are PDF'ing things in HTML, it is essentially printing them to a file. This means you need to create a print stylesheet ideally, but also bear in mind that print stylesheets mean that it ignores things like background color. The way around this would be to have a background image in your print stylesheet that is the color.

Also see this article, http://css-tricks./dont-rely-on-background-colors-printing/

Hope that helps