jsPDF can't get any styling to work
Solution 1:
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.
Solution 2:
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' }
});