jsPDF can't get any styling to work

css, javascript, jspdf, pdf-generation

Solution

I think the problem is that you use `media="print"` instead of `media="screen"`. Try making two seperate files, one for print and one for the screen:

<link rel="stylesheet" href="print.css" type="text/css" media="print"/>
<link rel="stylesheet" href="screen.css" type="text/css" media="screen"/>

The screen one will contain the styling for the page as seen in a browser. The print one will contain the styling for when you print your page, or in this case saving it as a PDF.

EDIT

I checked the jsPDF website but I think they don't support CSS. You could do something like this to create a document with different text colors though:

doc.setFontSize(22);
doc.setTextColor(255, 0, 0);
doc.text(20, 20, 'This is a title');

doc.setFontSize(16);
doc.setTextColor(0, 255, 0);
doc.text(20, 30, 'This is some normal sized text underneath.');

Put this code right under `var doc = new jsPDF('landscape');` in your script.

Problem

I'm new to using jsPDF but and for the life of me I can't get any css to apply to this thing! I've tried inline, internal, and external all to no avail! I read in another SO post that since it's technically printing stuff to a file I need a print style sheet, and that didn't work either. I have a very basic page that I'm just trying to get any CSS to work with: JS: ``` <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="jspdf.js"></script> <script type="text/javascript" src="./libs/FileSaver.js/FileSaver.js"></script> <script type="text/javascript" src="./libs/Blob.js/BlobBuilder.js"></script> <script type="text/javascript" src="jspdf.plugin.standard_fonts_metrics.js"></script> <script type="text/javascript" src="jspdf.plugin.split_text_to_size.js"></script> <script type="text/javascript" src="jspdf.plugin.from_html.js"></script> <script> $(document).ready(function(){ $('#dl').click(function(){ var specialElementHandlers = { '#editor': function(element, renderer){ return true; } }; var doc = new jsPDF('landscape'); doc.fromHTML($('body').get(0), 15, 15, {'width': 170, 'elementHandlers': specialElementHandlers}); doc.output('save'); }); }); </script> ``` HTML: ``` <body> <div id="dl">Download Maybe?</div> <div id="testcase"> <h1> We support special element handlers. Register them with jQuery-style </h1> </div> </body> ``` And finally the stylesheet that is external: ``` h1{ color: red; } div{ color: red; } ``` I'm sure all is getting included correctly, and that there are no errors, already checked all of that. Is there like some extra function I need to call to get the css to work as well? Let me know please! Thanks alot! Any other tips you may have are also appreciated! EDIT: This is the exact webpage: ``` <html> <head> <link rel="stylesheet" href="print.css" type="text/css" media="print"/> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="jspdf.js"></script> <script type="text/javascript" src="./libs/FileSaver.js/FileSaver.js"></script> <script type="text/javascript" src="./libs/Blob.js/BlobBuilder.js"></script> <script type="text/javascript" src="jspdf.plugin.standard_fonts_metrics.js"></script> <script type="text/javascript" src="jspdf.plugin.split_text_to_size.js"></script> <script type="text/javascript" src="jspdf.plugin.from_html.js"></script> <script> $(document).ready(function(){ $('#dl').click(function(){ var specialElementHandlers = { '#editor': function(element, renderer){ return true; } }; var doc = new jsPDF('landscape'); doc.fromHTML($('body').get(0), 15, 15, {'width': 170, 'elementHandlers': specialElementHandlers}); doc.output('save'); }); }); </script> </head> <body> <div id="dl">Download Maybe?</div> <div id="testcase"> <h1> We support special element handlers. Register them with jQuery-style </h1> </div> </body> </html> ```

Original source