Does external css get applied to the pdfs generated by jsPDF

Question

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

Answer 1

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.

Answer 2

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.com/dont-rely-on-background-colors-printing/

Hope that helps