Menu
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> 
601
A combine usage with jsPDF & html2canvas, which translating html content to PDF file. html2PDF function will auto fit the target dom width into PDF size. So no need to worry about the overflow part.
jsPDF is an open-source library for generating PDF documents using JavaScript. It provides multiple options to generate PDF files, with custom properties. It has numerous plugins to support various ways of PDF generation.
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.
113
you can try this option, that uses jsPDF, html2canvas and html2pdf libraries
from its README:
include this files:
<script src="jspdf.min.js"></script> <script src="html2canvas.min.js"></script> <script src="html2pdf.js"></script> and then you can generate your pdf by running:
html2pdf($('body').get(0), { margin: 1, filename: 'myfile.pdf', image: { type: 'jpeg', quality: 0.98 }, html2canvas: { dpi: 192, letterRendering: true }, jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' } }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
