mirror of https://gitee.com/karson/fastadmin.git
94 lines
2.7 KiB
HTML
94 lines
2.7 KiB
HTML
<!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>
|