page_break.html 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Page Break Test</title>
  5. <link rel="stylesheet" type="text/css" href="examples.css">
  6. <style>
  7. table,td {
  8. border: 1px solid silver;
  9. border-collapse: collapse
  10. }
  11. td {
  12. padding: .5em
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <div style='position: absolute; left: 0; top: 0; bottom: 0; overflow: auto; width: 400px'>
  18. This example show how the <em>page-break-before</em> style is rendered.
  19. <h1 style='page-break-before: always'>Numbers</h1>
  20. <p>1</p>
  21. <p>2</p>
  22. <p>3</p>
  23. <p>4</p>
  24. <h1 style='page-break-before: always'>Letters</h1>
  25. <p>a</p>
  26. <p>b</p>
  27. <p>c</p>
  28. <p>d</p>
  29. <h1 style='page-break-before: always'>Text</h1>
  30. <p>This is the content.</p>
  31. </div>
  32. <script src='../../dist/jspdf.debug.js'></script>
  33. <script src='../../libs/html2pdf.js'></script>
  34. <script>
  35. var pdf = new jsPDF('p', 'pt', 'letter');
  36. pdf.canvas.height = 72 * 11;
  37. pdf.canvas.width = 72 * 8.5;
  38. //html2pdf(document.documentElement.innerHTML, pdf, function(pdf){
  39. html2pdf(document.body, pdf, function(pdf){
  40. var iframe = document.createElement('iframe');
  41. iframe.setAttribute('style','position:absolute;right:0; top:0; bottom:0; height:100%; width:500px');
  42. document.body.appendChild(iframe);
  43. iframe.src = pdf.output('datauristring');
  44. });
  45. </script>
  46. </body>
  47. </html>