test_from_html_css_page_breaks.html 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. <!doctype html>
  2. <!--
  3. /**
  4. * jsPDF Test HTML PlugIn
  5. * Copyright (c) 2014 Steven Spungin (TwelveTone LLC) steven@twelvetone.tv
  6. *
  7. * Licensed under the MIT License.
  8. * http://opensource.org/licenses/mit-license
  9. */
  10. -->
  11. <html>
  12. <head>
  13. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  14. <title>Test HTML</title>
  15. <!-- Required Files -->
  16. <script type="text/javascript" src="../jspdf.js"></script>
  17. <!-- Plugin Dependencies -->
  18. <script type="text/javascript" src="../jspdf.plugin.standard_fonts_metrics.js"></script>
  19. <script type="text/javascript" src="../jspdf.plugin.split_text_to_size.js"></script>
  20. <script type="text/javascript" src="../jspdf.plugin.from_html.js"></script>
  21. <!-- Plugin To Test -->
  22. <script type="text/javascript" src="test_harness.js"></script>
  23. <!-- Test Dependencies -->
  24. <script>
  25. pdf_test_harness.onload = function(harness) {
  26. var pdf = new jsPDF('p', 'pt', 'letter');
  27. var ta = document.getElementById('textarea');
  28. pdf.fromHTML(ta.value, 0, 0);
  29. ta.onkeyup = function(){
  30. var pdf = new jsPDF('p', 'pt', 'letter');
  31. pdf.fromHTML(ta.value, 0, 0);
  32. harness.setPdf(pdf);
  33. }
  34. harness.header.style.left='300px';
  35. harness.body.style.left='300px';
  36. return pdf;
  37. }
  38. </script>
  39. </head>
  40. <body style='background-color: silver; margin: 0;'>
  41. <textarea id='textarea' style='position:fixed;left:0;width:290px;height:100%'>
  42. <html>
  43. <head>
  44. <style>
  45. .break{
  46. page-break-before:always;
  47. }
  48. body{
  49. font-size:2em;
  50. }
  51. </style>
  52. </head>
  53. <body>
  54. <div>page 1 <em>ok?</em></div>
  55. <div class='break'>page 2</div>
  56. <div class='break' style='margin-top:1in'>page 3</div>
  57. </body>
  58. </html>
  59. </textarea>
  60. </body>
  61. </html>