123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171 |
- <!DOCTYPE html>
- <html>
- <head>
- <title>context2d auto-break</title>
- <link rel="stylesheet" type="text/css" href="examples.css">
- <style>
- </style>
- </head>
- <body>
- <div style='position: absolute; left: 0; top: 0; bottom: 0; width: 400px; overflow: auto'>
- <h1>Autobreak</h1>
- <p>The context2d plugin was tweaked to auto-break a document into multiple pages.</p>
- <p>The auto-page-break feature allows vertical positioning by addressing the Y coordinate beyond the PDF page.</p>
- <p>
- Note: <em>There is a margin bug that causes an item to not draw in the break.</em>
- </p>
- <ol>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- <li>OL Item</li>
- </ol>
- </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;
- canvas.height = 72 * 11;
- canvas.width=72 * 8.5;;
- // var width = 400;
- document.body.style.width = 400 + 'px';
- html2pdf(document.body, pdf, function(pdf) {
- var iframe = document.createElement('iframe');
- iframe.setAttribute('style','position:absolute;right:0; top:0; bottom:0; height:100%; width:500px');
- 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>
|