pdf2.html 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6. <style>
  7. .feedback-overlay-black {
  8. background-color: #000;
  9. opacity: 0.5;
  10. position: absolute;
  11. top: 0;
  12. left: 0;
  13. width: 100%;
  14. height: 100%;
  15. margin: 0;
  16. }
  17. </style>
  18. <style>
  19. div {
  20. padding: 20px;
  21. margin: 0 auto;
  22. border: 5px solid black;
  23. }
  24. h1 {
  25. border-bottom: 2px solid white;
  26. }
  27. h2 {
  28. background: #efefef;
  29. padding: 10px;
  30. }
  31. </style>
  32. </head>
  33. <body>
  34. <div style="background: red;">
  35. <div style="background: green;">
  36. <div style="background: blue; border-color: white;">
  37. <div style="background: yellow;">
  38. <div style="background: orange;">
  39. <h1>Heading</h1>
  40. Text that isn't wrapped in anything.
  41. <p>
  42. Followed by some text wrapped in a <b>&lt;p&gt; paragraph.</b>
  43. </p>
  44. <p>
  45. Maybe add a <a href="https://parall.ax/">Parallax</a> or a different style of <a href="#" style='font-weight: 700; color: purple; font-size: 2em' id="highlight">link with a highlight</a>.
  46. </p>
  47. <hr />
  48. <h2>More content</h2>
  49. <div style="width: 10px; height: 10px; border-width: 10px; padding: 0;">a</div>
  50. </div>
  51. </div>
  52. </div>
  53. </div>
  54. </div>
  55. <script src='../../dist/jspdf.debug.js'></script>
  56. <script src='../../libs/html2pdf.js'></script>
  57. <script>
  58. var pdf = new jsPDF('p', 'pt', 'letter');
  59. var canvas = pdf.canvas;
  60. var width = 600;
  61. //canvas.width=8.5*72;
  62. document.body.style.width=width + "px";
  63. html2canvas(document.body, {
  64. canvas:canvas,
  65. onrendered: function(canvas) {
  66. var iframe = document.createElement('iframe');
  67. iframe.setAttribute('style', 'position:absolute;top:0;right:0;height:100%; width:600px');
  68. document.body.appendChild(iframe);
  69. iframe.src = pdf.output('datauristring');
  70. //var div = document.createElement('pre');
  71. //div.innerText=pdf.output();
  72. //document.body.appendChild(div);
  73. }
  74. });
  75. </script>
  76. </body>
  77. </html>