fuyu
/
mark


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
							<!DOCTYPE html>
<html>
<head>
<title>Html2Pdf</title>
<link rel="stylesheet" type="text/css" href="examples.css">
<style>
</style>
</head>
<body>
	<div style='position: absolute; left: 0; top: 0; bottom: 0; overflow: auto; width: 400px'>


		<h1>Html2Pdf</h1>
		<p>
			This demo uses Html2Canvas.js to render HTML. <br />Instead of using an HTML canvas however, a canvas wrapper using jsPDF is substituted. The <em>context2d</em> provided by the wrapper calls native PDF rendering methods.
		</p>
		<p>A PDF of this page will be inserted into the right margin.</p>

		<h2>Colors</h2>
		<p>
			<span style='color: red'>red</span> <span style='color: rgb(0, 255, 0)'>rgb(0,255,0)</span> <span style='color: rgba(0, 0, 0, .5)'>rgba(0,0,0,.5)</span> <span style='color: #0000FF'>#0000FF</span> <span style='color: #0FF'>#0FF</span>
		</p>

		<h2>Text Alignment</h2>
		<div style='text-align: left'>left</div>
		<div style='text-align: center'>center</div>
		<div style='text-align: right'>right</div>

		<h2>Margins and Padding</h2>
		<div style='background-color: red'>
			Red
			<div style='background-color: green; margin: 1em; padding: 1em;'>
				Green
				<div style='background-color: blue; margin: 1em'>Blue</div>
			</div>
		</div>

		<h2>Borders</h2>
		<div style='border: 1px solid black'>Single</div>
		<hr />
		<div style='border: 4px double black'>Double</div>

		<h2>Font Style</h2>
		<div style='font-style: normal'>Normal</div>
		<div style='font-style: italic'>Italic</div>
		<div style='font-style: oblique'>Oblique</div>
		<h2>Lists</h2>
		<ul>
			<li>apples</li>
			<li>oranges</li>
			<li>pears</li>
			<li>peaches</li>
			<li>lemons</li>
			<li>limes</li>
		</ul>

		<h2>Font Size</h2>
		<div style='font-size: 10px'>10px</div>
		<div style='font-size: 20px'>20px</div>
		<div style='font-size: 30px'>30px</div>

		<div style='font-size: 20pt'>20pt</div>
		<div style='font-size: 1em'>1em</div>
		<div style='font-size: 2em'>2em</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;
       canvas.height = 72 * 11;
       canvas.width=72 * 8.5;;
       // var width = 400;

        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>