123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687 |
- <!DOCTYPE html>
- <html>
- <head>
- <title></title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <style>
- .feedback-overlay-black {
- background-color: #000;
- opacity: 0.5;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- margin: 0;
- }
- </style>
- <style>
- div {
- padding: 20px;
- margin: 0 auto;
- border: 5px solid black;
- }
- h1 {
- border-bottom: 2px solid white;
- }
- h2 {
- background: #efefef;
- padding: 10px;
- }
- </style>
- </head>
- <body>
- <div style="background: red;">
- <div style="background: green;">
- <div style="background: blue; border-color: white;">
- <div style="background: yellow;">
- <div style="background: orange;">
- <h1>Heading</h1>
- Text that isn't wrapped in anything.
- <p>
- Followed by some text wrapped in a <b><p> paragraph.</b>
- </p>
- <p>
- 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>.
- </p>
- <hr />
- <h2>More content</h2>
- <div style="width: 10px; height: 10px; border-width: 10px; padding: 0;">a</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <script src='../../dist/jspdf.debug.js'></script>
- <script src='../../libs/html2pdf.js'></script>
- <script>
- var pdf = new jsPDF('p', 'pt', 'letter');
- var canvas = pdf.canvas;
- var width = 600;
- //canvas.width=8.5*72;
- document.body.style.width=width + "px";
- html2canvas(document.body, {
- canvas:canvas,
- onrendered: function(canvas) {
- var iframe = document.createElement('iframe');
- iframe.setAttribute('style', 'position:absolute;top:0;right:0;height:100%; width:600px');
- document.body.appendChild(iframe);
- iframe.src = pdf.output('datauristring');
- //var div = document.createElement('pre');
- //div.innerText=pdf.output();
- //document.body.appendChild(div);
- }
- });
- </script>
- </body>
- </html>
|