jsPDF can’t get any styling to work

by

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="https://stackoverflow.com/questions/20460035/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.

More Related Contents:

  1. how to use html2canvas and jspdf to export to pdf in a proper and simple way
  2. How to add a black shadow on top of a div block with background image?
  3. How do you read CSS rule values with JavaScript?
  4. jQuery SVG, why can’t I addClass?
  5. Setting background-image using jQuery CSS property
  6. How to get a style attribute from a CSS class by javascript/jQuery?
  7. How to get the background color code of an element in hex?
  8. “Uncaught TypeError: a.indexOf is not a function” error when opening new foundation project
  9. jQuery counting elements by class – what is the best way to implement this?
  10. ScrollIntoView() causing the whole page to move
  11. Shrink DIV to text that’s wrapped to its max-width?
  12. How to ONLY trigger parent click event when a child is clicked
  13. Performance of CSS Transitions vs. JS animation packages
  14. Detect fullscreen mode
  15. Count animation from number A to B
  16. How to dynamically modify in materialize css framework
  17. Why scripts at the end of body tag
  18. How to make Jquery UI Tabs scroll horizontally if there are too many tabs
  19. How can I detect when a new element has been added to the document in jquery?
  20. Get the Size of a CSS Background Image Using JavaScript?
  21. How to Toggle a div’s visibility by using a button click
  22. How to disable elements selection and resizing in contenteditable div?
  23. Preloading @font-face fonts?
  24. collapse and expand tabs jquery / simple accordion
  25. Pausing CSS animation with javascript and also jumping to a specific place in the animation
  26. fade effect using javascript no jquery?
  27. How to get CSS class property in Javascript?
  28. How to keep elements non-refreshed
  29. How do you swap DIVs on mouseover (jQuery)?
  30. How to get a leaflet map canvas to have a 100% height?

Leave a Comment