first commit
This commit is contained in:
171
WebRoot/node_modules/pdf/jsPDF-1.3.2/examples/html2pdf/auto_break.html
generated
vendored
Normal file
171
WebRoot/node_modules/pdf/jsPDF-1.3.2/examples/html2pdf/auto_break.html
generated
vendored
Normal file
@ -0,0 +1,171 @@
|
||||
<!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>
|
||||
1
WebRoot/node_modules/pdf/jsPDF-1.3.2/examples/html2pdf/examples.css
generated
vendored
Normal file
1
WebRoot/node_modules/pdf/jsPDF-1.3.2/examples/html2pdf/examples.css
generated
vendored
Normal file
@ -0,0 +1 @@
|
||||
@CHARSET "UTF-8";
|
||||
BIN
WebRoot/node_modules/pdf/jsPDF-1.3.2/examples/html2pdf/images/favicon.png
generated
vendored
Normal file
BIN
WebRoot/node_modules/pdf/jsPDF-1.3.2/examples/html2pdf/images/favicon.png
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
65
WebRoot/node_modules/pdf/jsPDF-1.3.2/examples/html2pdf/lists.html
generated
vendored
Normal file
65
WebRoot/node_modules/pdf/jsPDF-1.3.2/examples/html2pdf/lists.html
generated
vendored
Normal file
@ -0,0 +1,65 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Html2Pdf</title>
|
||||
<link rel="stylesheet" type="text/css" href="examples.css">
|
||||
<style>
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style='position: absolute'>
|
||||
<h1>Ordered And Unordered Lists</h1>
|
||||
<h2>Implemented</h2>
|
||||
<ol>
|
||||
<li>OL Item (default)</li>
|
||||
<li style='list-style-type: decimal'>OL Item (decimal)</li>
|
||||
<li style='list-style-type: upper-alpha'>OL Item (upper-alpha)</li>
|
||||
<li style='list-style-type: lower-alpha'>OL Item (lower-alpha)</li>
|
||||
<li style='list-style-type: upper-roman'>OL Item (upper-roman)</li>
|
||||
<li style='list-style-type: lower-roman'>OL Item (lower-roman)</li>
|
||||
<li style='list-style-type: none'>OL Item (none)</li>
|
||||
</ol>
|
||||
<ul>
|
||||
<li>UL Item (default)</li>
|
||||
<li style='list-style-type: circle'>UL Item (circle)</li>
|
||||
<li style='list-style-type: square'>UL Item (square)</li>
|
||||
<li style='list-style-type: disc'>UL Item (disc)</li>
|
||||
<li style='list-style-type: none'>OL Item (none)</li>
|
||||
</ul>
|
||||
|
||||
<h2>Not Implemented</h2>
|
||||
<pre>
|
||||
upper-latin
|
||||
lower-latin
|
||||
armenian
|
||||
cjk-ideographic
|
||||
decimal-leading-zero
|
||||
georgian
|
||||
hebrew
|
||||
hiragana
|
||||
hiragana-iroha
|
||||
katakana
|
||||
katakana-iroha
|
||||
</pre>
|
||||
</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(canvas) {
|
||||
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');
|
||||
}
|
||||
);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
54
WebRoot/node_modules/pdf/jsPDF-1.3.2/examples/html2pdf/page_break.html
generated
vendored
Normal file
54
WebRoot/node_modules/pdf/jsPDF-1.3.2/examples/html2pdf/page_break.html
generated
vendored
Normal file
@ -0,0 +1,54 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Page Break Test</title>
|
||||
<link rel="stylesheet" type="text/css" href="examples.css">
|
||||
<style>
|
||||
table,td {
|
||||
border: 1px solid silver;
|
||||
border-collapse: collapse
|
||||
}
|
||||
|
||||
td {
|
||||
padding: .5em
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style='position: absolute; left: 0; top: 0; bottom: 0; overflow: auto; width: 400px'>
|
||||
This example show how the <em>page-break-before</em> style is rendered.
|
||||
|
||||
<h1 style='page-break-before: always'>Numbers</h1>
|
||||
<p>1</p>
|
||||
<p>2</p>
|
||||
<p>3</p>
|
||||
<p>4</p>
|
||||
|
||||
<h1 style='page-break-before: always'>Letters</h1>
|
||||
<p>a</p>
|
||||
<p>b</p>
|
||||
<p>c</p>
|
||||
<p>d</p>
|
||||
|
||||
<h1 style='page-break-before: always'>Text</h1>
|
||||
<p>This is the content.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<script src='../../dist/jspdf.debug.js'></script>
|
||||
<script src='../../libs/html2pdf.js'></script>
|
||||
<script>
|
||||
var pdf = new jsPDF('p', 'pt', 'letter');
|
||||
pdf.canvas.height = 72 * 11;
|
||||
pdf.canvas.width = 72 * 8.5;
|
||||
|
||||
//html2pdf(document.documentElement.innerHTML, pdf, function(pdf){
|
||||
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');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
180
WebRoot/node_modules/pdf/jsPDF-1.3.2/examples/html2pdf/pdf.html
generated
vendored
Normal file
180
WebRoot/node_modules/pdf/jsPDF-1.3.2/examples/html2pdf/pdf.html
generated
vendored
Normal file
@ -0,0 +1,180 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>display/box/float/clear test</title>
|
||||
<style type="text/css">
|
||||
/* last modified: 1 Dec 98 */
|
||||
html {
|
||||
font: 10px/1 Verdana, sans-serif;
|
||||
background-color: blue;
|
||||
color: white;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 1.5em;
|
||||
border: .5em solid black;
|
||||
padding: 0;
|
||||
width: 48em;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
dl {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
dt {
|
||||
background-color: rgb(204, 0, 0);
|
||||
margin: 0;
|
||||
padding: 1em;
|
||||
width: 10.638%; /* refers to parent element's width of 47em. = 5em or 50px */
|
||||
height: 28em;
|
||||
border: .5em solid black;
|
||||
float: left;
|
||||
}
|
||||
|
||||
dd {
|
||||
float: right;
|
||||
margin: 0 0 0 1em;
|
||||
border: 1em solid black;
|
||||
padding: 1em;
|
||||
width: 34em;
|
||||
height: 27em;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
display: block; /* i.e., suppress marker */
|
||||
color: black;
|
||||
height: 9em;
|
||||
width: 5em;
|
||||
margin: 0;
|
||||
border: .5em solid black;
|
||||
padding: 1em;
|
||||
float: left;
|
||||
background-color: #FC0;
|
||||
}
|
||||
|
||||
#bar {
|
||||
background-color: black;
|
||||
color: white;
|
||||
width: 41.17%; /* = 14em */
|
||||
border: 0;
|
||||
margin: 0 1em;
|
||||
}
|
||||
|
||||
#baz {
|
||||
margin: 1em 0;
|
||||
border: 0;
|
||||
padding: 1em;
|
||||
width: 10em;
|
||||
height: 10em;
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
form {
|
||||
margin: 0;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
form p {
|
||||
line-height: 1.9;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 1em 1em 1em 2em;
|
||||
border-width: 1em 1.5em 2em .5em;
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
padding: 1em 0;
|
||||
width: 5em;
|
||||
height: 9em;
|
||||
float: left;
|
||||
background-color: #FC0;
|
||||
color: black;
|
||||
}
|
||||
|
||||
address {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
h1 {
|
||||
background-color: black;
|
||||
color: white;
|
||||
float: left;
|
||||
margin: 1em 0;
|
||||
border: 0;
|
||||
padding: 1em;
|
||||
width: 10em;
|
||||
height: 10em;
|
||||
font-weight: normal;
|
||||
font-size: 1em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<dl>
|
||||
<dt>toggle</dt>
|
||||
<dd>
|
||||
<ul>
|
||||
<li>the way</li>
|
||||
<li id="bar">
|
||||
<p>the world ends</p>
|
||||
<form action="./" method="get">
|
||||
<p>
|
||||
bang <input type="radio" name="foo" value="off">
|
||||
</p>
|
||||
<p>
|
||||
whimper <input type="radio" name="foo2" value="on">
|
||||
</p>
|
||||
</form>
|
||||
</li>
|
||||
<li>i grow old</li>
|
||||
<li id="baz">pluot?</li>
|
||||
</ul>
|
||||
<blockquote>
|
||||
<address>bar maids,</address>
|
||||
</blockquote>
|
||||
<h1>sing to me, erbarme dich</h1>
|
||||
</dd>
|
||||
</dl>
|
||||
<p style="color: black; font-size: 1em; line-height: 1.3em; clear: both">
|
||||
This is a nonsensical document, but syntactically valid HTML 4.0. All 100% conformant CSS1 agents should be able to render the document elements above this paragraph <b>indistinguishably</b> (to the pixel) from this reference rendering, (except font rasterization and form widgets). All discrepancies should be traceable to CSS1 implementation shortcomings. Once you have finished evaluating this test, you can return to the <A HREF="sec5526c.htm" style="text-decoration: none">parent page</A>.
|
||||
</p>
|
||||
|
||||
<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.width = 8.5 * 72;
|
||||
|
||||
html2canvas(document.body, {
|
||||
canvas:canvas,
|
||||
onrendered: function(canvas) {
|
||||
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>
|
||||
87
WebRoot/node_modules/pdf/jsPDF-1.3.2/examples/html2pdf/pdf2.html
generated
vendored
Normal file
87
WebRoot/node_modules/pdf/jsPDF-1.3.2/examples/html2pdf/pdf2.html
generated
vendored
Normal file
@ -0,0 +1,87 @@
|
||||
<!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="#">link</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>
|
||||
93
WebRoot/node_modules/pdf/jsPDF-1.3.2/examples/html2pdf/showcase.html
generated
vendored
Normal file
93
WebRoot/node_modules/pdf/jsPDF-1.3.2/examples/html2pdf/showcase.html
generated
vendored
Normal file
@ -0,0 +1,93 @@
|
||||
<!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>
|
||||
218
WebRoot/node_modules/pdf/jsPDF-1.3.2/examples/html2pdf/showcase_supported_html.html
generated
vendored
Normal file
218
WebRoot/node_modules/pdf/jsPDF-1.3.2/examples/html2pdf/showcase_supported_html.html
generated
vendored
Normal file
@ -0,0 +1,218 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>HTML Test File</title>
|
||||
<link rel="stylesheet" type="text/css" href="examples.css">
|
||||
<style>
|
||||
table,td {
|
||||
border: 1px solid silver;
|
||||
border-collapse: collapse
|
||||
}
|
||||
|
||||
td {
|
||||
padding: .5em
|
||||
}
|
||||
|
||||
#table-list-styles td {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.page-break {
|
||||
page-break-before: always;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style='position: absolute; left: 0; top: 0; bottom: 0; overflow: auto; width: 400px'>
|
||||
<h1>HTML Test File</h1>
|
||||
This page showcases all HTML supported features.
|
||||
<hr>
|
||||
<h1>Headings</h1>
|
||||
<h1>Heading 1</h1>
|
||||
<h2>Heading 2</h2>
|
||||
<h3>Heading 3</h3>
|
||||
<h4>Heading 4</h4>
|
||||
<h5>Heading 5</h5>
|
||||
<h6>Heading 6</h6>
|
||||
<hr>
|
||||
<h1>
|
||||
<a id="colors" class="mce-item-anchor"></a>Colors
|
||||
</h1>
|
||||
<p>
|
||||
<span style="color: #ff0000; background-color: #00ff00;" data-mce-style="color: #ff0000; background-color: #00ff00;">Red Text With Green Background</span>
|
||||
</p>
|
||||
<hr>
|
||||
<h1 class='page-break'>
|
||||
<a id="font-sizes" class="mce-item-anchor"></a>Font Sizes
|
||||
</h1>
|
||||
<p>
|
||||
<span style="font-size: 12pt;" data-mce-style="font-size: 12pt;">12 Point</span>
|
||||
</p>
|
||||
<p>
|
||||
<span style="font-size: 24pt;" data-mce-style="font-size: 24pt;">24 Point</span>
|
||||
</p>
|
||||
<hr>
|
||||
<h1>
|
||||
<a id="fonts" class="mce-item-anchor"></a>Fonts
|
||||
</h1>
|
||||
<p>
|
||||
<span style="font-size: 24pt; font-family: arial, helvetica, sans-serif;" data-mce-style="font-size: 24pt; font-family: arial, helvetica, sans-serif;">Arial</span>
|
||||
</p>
|
||||
<p>
|
||||
<span style="font-size: 24pt; font-family: georgia, palatino;" data-mce-style="font-size: 24pt; font-family: georgia, palatino;">Georgia</span>
|
||||
</p>
|
||||
<p>
|
||||
<span style="font-size: 24pt; font-family: terminal, monaco;" data-mce-style="font-size: 24pt; font-family: terminal, monaco;">Terminal</span>
|
||||
</p>
|
||||
<p>
|
||||
<span style="font-size: 24pt; font-family: 'times new roman', times;" data-mce-style="font-size: 24pt; font-family: 'times new roman', times;">Times</span>
|
||||
</p>
|
||||
<hr>
|
||||
<h1 class='page-break'>
|
||||
<a id="tables" class="mce-item-anchor"></a>Tables
|
||||
</h1>
|
||||
<table class="mce-item-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Number</td>
|
||||
<td>English</td>
|
||||
<td>Spanish</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>one</td>
|
||||
<td>uno</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>two</td>
|
||||
<td>dos</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>three</td>
|
||||
<td>tres</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h1>Images</h1>
|
||||
Images are subject to CORS restrictions an may only show up in a production environment.
|
||||
When testing, we start Chrome with the '--allow-file-access-from-files' flag...
|
||||
|
||||
<img src="images/favicon.png" height="100" />
|
||||
|
||||
<h1 class='page-break'>Lists</h1>
|
||||
<table id='table-list-styles'>
|
||||
<tr>
|
||||
<td>
|
||||
<p>Default</p>
|
||||
<ul>
|
||||
<li>Milk</li>
|
||||
<li>Eggs</li>
|
||||
<li>Cheese</li>
|
||||
</ul>
|
||||
<p>Circle</p>
|
||||
<ul style="list-style-type: circle;" data-mce-style="list-style-type: circle;">
|
||||
<li>Milk</li>
|
||||
<li>Eggs</li>
|
||||
<li>Cheese</li>
|
||||
</ul>
|
||||
<p>Disk</p>
|
||||
<ul style="list-style-type: disc;" data-mce-style="list-style-type: disc;">
|
||||
<li>Milk</li>
|
||||
<li>Eggs</li>
|
||||
<li>Cheese</li>
|
||||
</ul>
|
||||
<p>Square</p>
|
||||
<ul style="list-style-type: square;" data-mce-style="list-style-type: square;">
|
||||
<li>Milk</li>
|
||||
<li>Eggs</li>
|
||||
<li>Cheese</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td>
|
||||
<p>Default</p>
|
||||
<ol>
|
||||
<li>Milk</li>
|
||||
<li>Eggs</li>
|
||||
<li>Cheese</li>
|
||||
</ol>
|
||||
<p>Lower Alpha</p>
|
||||
<ol style="list-style-type: lower-alpha;" data-mce-style="list-style-type: lower-alpha;">
|
||||
<li>Milk</li>
|
||||
<li>Eggs</li>
|
||||
<li>Cheese</li>
|
||||
</ol>
|
||||
<p>Upper Alpha</p>
|
||||
<ol style="list-style-type: upper-alpha;" data-mce-style="list-style-type: upper-alpha;">
|
||||
<li>Milk</li>
|
||||
<li>Eggs</li>
|
||||
<li>Cheese</li>
|
||||
</ol>
|
||||
</td>
|
||||
<td>
|
||||
<p>Lower Roman</p>
|
||||
<ol style="list-style-type: lower-roman;" data-mce-style="list-style-type: lower-roman;">
|
||||
<li>Milk</li>
|
||||
<li>Eggs</li>
|
||||
<li>Cheese</li>
|
||||
</ol>
|
||||
<p>Upper Roman</p>
|
||||
<ol style="list-style-type: upper-roman;" data-mce-style="list-style-type: upper-roman;">
|
||||
<li>Milk</li>
|
||||
<li>Eggs</li>
|
||||
<li>Cheese</li>
|
||||
</ol>
|
||||
<p>Lower Greek</p>
|
||||
<ol style="list-style-type: lower-greek;" data-mce-style="list-style-type: lower-greek;">
|
||||
<li>Milk</li>
|
||||
<li>Eggs</li>
|
||||
<li>Cheese</li>
|
||||
</ol>
|
||||
<p>Upper Greek</p>
|
||||
<ol style="list-style-type: upper-greek;" data-mce-style="list-style-type: upper-greek;">
|
||||
<li>Milk</li>
|
||||
<li>Eggs</li>
|
||||
<li>Cheese</li>
|
||||
</ol>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h1 class='page-break'>Hyperlinks</h1>
|
||||
<h2>Internal</h2>
|
||||
<p>
|
||||
<a href="#colors" data-mce-href="#colors">Colors</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="#font-sizes" data-mce-href="#font-sizes">Font Sizes</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="#fonts" data-mce-href="#fonts">Fonts</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="#tables" data-mce-href="#tables">Tables</a>
|
||||
</p>
|
||||
<h2>External</h2>
|
||||
<p>
|
||||
<a href="http://www.twelvetone.tv" data-mce-href="http://www.twelvetone.tv">www.twelvetone.tv</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<script src='../../dist/jspdf.debug.js'></script>
|
||||
<script src='../../libs/html2pdf.js'></script>
|
||||
|
||||
<script>
|
||||
var pdf = new jsPDF('p', 'pt', 'letter');
|
||||
pdf.canvas.height = 72 * 11;
|
||||
pdf.canvas.width = 72 * 8.5;
|
||||
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');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
27
WebRoot/node_modules/pdf/jsPDF-1.3.2/examples/html2pdf/simple.html
generated
vendored
Normal file
27
WebRoot/node_modules/pdf/jsPDF-1.3.2/examples/html2pdf/simple.html
generated
vendored
Normal file
@ -0,0 +1,27 @@
|
||||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>html2pdf Simple Example</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<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;;
|
||||
|
||||
// can also be document.body
|
||||
var html = '<html><body>Hello <strong> World</strong></body></html>';
|
||||
|
||||
html2pdf(html, pdf, function(pdf) {
|
||||
pdf.output('dataurlnewwindow');
|
||||
});
|
||||
</script>
|
||||
239
WebRoot/node_modules/pdf/jsPDF-1.3.2/examples/html2pdf/tables.html
generated
vendored
Normal file
239
WebRoot/node_modules/pdf/jsPDF-1.3.2/examples/html2pdf/tables.html
generated
vendored
Normal file
@ -0,0 +1,239 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Html2Pdf</title>
|
||||
<link rel="stylesheet" type="text/css" href="examples.css">
|
||||
<style>
|
||||
table {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
table td {
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.table1 {
|
||||
border: 1px solid red;
|
||||
}
|
||||
|
||||
.table2,.table2 td {
|
||||
border: 1px solid silver;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.table2 td:first-child {
|
||||
background-color: lightblue;
|
||||
}
|
||||
|
||||
.CSSTableGenerator {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
width: 100%;
|
||||
box-shadow: 10px 10px 5px #888888;
|
||||
border: 1px solid #000000;
|
||||
-moz-border-radius-bottomleft: 0px;
|
||||
-webkit-border-bottom-left-radius: 0px;
|
||||
border-bottom-left-radius: 0px;
|
||||
-moz-border-radius-bottomright: 0px;
|
||||
-webkit-border-bottom-right-radius: 0px;
|
||||
border-bottom-right-radius: 0px;
|
||||
-moz-border-radius-topright: 0px;
|
||||
-webkit-border-top-right-radius: 0px;
|
||||
border-top-right-radius: 0px;
|
||||
-moz-border-radius-topleft: 0px;
|
||||
-webkit-border-top-left-radius: 0px;
|
||||
border-top-left-radius: 0px;
|
||||
}
|
||||
|
||||
.CSSTableGenerator table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.CSSTableGenerator tr:last-child td:last-child {
|
||||
-moz-border-radius-bottomright: 0px;
|
||||
-webkit-border-bottom-right-radius: 0px;
|
||||
border-bottom-right-radius: 0px;
|
||||
}
|
||||
|
||||
.CSSTableGenerator table tr:first-child td:first-child {
|
||||
-moz-border-radius-topleft: 0px;
|
||||
-webkit-border-top-left-radius: 0px;
|
||||
border-top-left-radius: 0px;
|
||||
}
|
||||
|
||||
.CSSTableGenerator table tr:first-child td:last-child {
|
||||
-moz-border-radius-topright: 0px;
|
||||
-webkit-border-top-right-radius: 0px;
|
||||
border-top-right-radius: 0px;
|
||||
}
|
||||
|
||||
.CSSTableGenerator tr:last-child td:first-child {
|
||||
-moz-border-radius-bottomleft: 0px;
|
||||
-webkit-border-bottom-left-radius: 0px;
|
||||
border-bottom-left-radius: 0px;
|
||||
}
|
||||
|
||||
.CSSTableGenerator tr:hover td {
|
||||
|
||||
}
|
||||
|
||||
.CSSTableGenerator tr:nth-child(odd) {
|
||||
background-color: #ffaa56;
|
||||
}
|
||||
|
||||
.CSSTableGenerator tr:nth-child(even) {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.CSSTableGenerator td {
|
||||
vertical-align: middle;
|
||||
border: 1px solid #000000;
|
||||
border-width: 0px 1px 1px 0px;
|
||||
text-align: left;
|
||||
padding: 7px;
|
||||
font-size: 10px;
|
||||
font-family: Arial;
|
||||
font-weight: normal;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.CSSTableGenerator tr:last-child td {
|
||||
border-width: 0px 1px 0px 0px;
|
||||
}
|
||||
|
||||
.CSSTableGenerator tr td:last-child {
|
||||
border-width: 0px 0px 1px 0px;
|
||||
}
|
||||
|
||||
.CSSTableGenerator tr:last-child td:last-child {
|
||||
border-width: 0px 0px 0px 0px;
|
||||
}
|
||||
|
||||
.CSSTableGenerator tr:first-child td {
|
||||
background: -o-linear-gradient(bottom, #ff7f00 5%, #bf5f00 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ff7f00), color-stop(1, #bf5f00));
|
||||
background: -moz-linear-gradient(center top, #ff7f00 5%, #bf5f00 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff7f00", endColorstr="#bf5f00");
|
||||
background: -o-linear-gradient(top, #ff7f00, bf5f00);
|
||||
background-color: #ff7f00;
|
||||
border: 0px solid #000000;
|
||||
text-align: center;
|
||||
border-width: 0px 0px 1px 1px;
|
||||
font-size: 14px;
|
||||
font-family: Arial;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.CSSTableGenerator tr:first-child:hover td {
|
||||
background: -o-linear-gradient(bottom, #ff7f00 5%, #bf5f00 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ff7f00), color-stop(1, #bf5f00));
|
||||
background: -moz-linear-gradient(center top, #ff7f00 5%, #bf5f00 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff7f00", endColorstr="#bf5f00");
|
||||
background: -o-linear-gradient(top, #ff7f00, bf5f00);
|
||||
background-color: #ff7f00;
|
||||
}
|
||||
|
||||
.CSSTableGenerator tr:first-child td:first-child {
|
||||
border-width: 0px 0px 1px 0px;
|
||||
}
|
||||
|
||||
.CSSTableGenerator tr:first-child td:last-child {
|
||||
border-width: 0px 0px 1px 1px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style='position: absolute'>
|
||||
<h1>Tables</h1>
|
||||
<table class='table1'>
|
||||
<tr>
|
||||
<td>Item</td>
|
||||
<td>Cost</td>
|
||||
<td>Description</td>
|
||||
<td>Available</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Milk</td>
|
||||
<td>$1.00</td>
|
||||
<td>Hello PDF World</td>
|
||||
<td>Out Of Stock</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Milk</td>
|
||||
<td>$1.00</td>
|
||||
<td>Hello PDF World</td>
|
||||
<td>Out Of Stock</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table class='table2'>
|
||||
<tr>
|
||||
<td>Item</td>
|
||||
<td>Cost</td>
|
||||
<td>Description</td>
|
||||
<td>Available</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Milk</td>
|
||||
<td>$1.00</td>
|
||||
<td>Hello PDF World</td>
|
||||
<td>Out Of Stock</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Milk</td>
|
||||
<td>$1.00</td>
|
||||
<td>Hello PDF World</td>
|
||||
<td>Out Of Stock</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table class='CSSTableGenerator'>
|
||||
<tr>
|
||||
<td>Item</td>
|
||||
<td>Cost</td>
|
||||
<td>Description</td>
|
||||
<td>Available</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Milk</td>
|
||||
<td>$1.00</td>
|
||||
<td>Hello PDF World</td>
|
||||
<td>Out Of Stock</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Milk</td>
|
||||
<td>$1.00</td>
|
||||
<td>Hello PDF World</td>
|
||||
<td>Out Of Stock</td>
|
||||
</tr>
|
||||
</table>
|
||||
</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>
|
||||
269
WebRoot/node_modules/pdf/jsPDF-1.3.2/examples/html2pdf/total_mess.html
generated
vendored
Normal file
269
WebRoot/node_modules/pdf/jsPDF-1.3.2/examples/html2pdf/total_mess.html
generated
vendored
Normal file
@ -0,0 +1,269 @@
|
||||
<!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; width: 400px'>
|
||||
<br />
|
||||
<h1>Heading one</h1>
|
||||
<h2>Header two</h2>
|
||||
<h3>Header three</h3>
|
||||
<h4>Header four</h4>
|
||||
<h5>Header five</h5>
|
||||
<h6>Header six</h6>
|
||||
<p>
|
||||
This is a copy of one of the sample pages from the <a href="http://www.wordpress.org" onclick="_gaq.push(['_trackEvent', 'outbound-article', 'http://www.wordpress.org', 'WordPress']);">WordPress</a> theme development test content. I found it handy to keep a copy of this for building sites that aren’t using WordPress. 99% of the credit goes to them, I’m just hosting it in a handy place in case it’s useful to anyone other than me.
|
||||
</p>
|
||||
<h2>Blockquote Tests</h2>
|
||||
<p>Blockquote:</p>
|
||||
<blockquote>
|
||||
<p>Here’s a one line quote.</p>
|
||||
</blockquote>
|
||||
<p>This part isn’t quoted. Here’s a longer quote:</p>
|
||||
<blockquote>
|
||||
<p>I have learned, that if one advances confidently in the direction of his dreams, and endeavors to live the life he has imagined, he will meet with a success unexpected in common hours.</p>
|
||||
<p>
|
||||
<cite>Henry David Thoreau </cite>
|
||||
</p>
|
||||
</blockquote>
|
||||
<p>And some trailing text.</p>
|
||||
<h2>Table Layout Test</h2>
|
||||
<table class="statsDay">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Title</th>
|
||||
<th class="views">Views</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
<tr class="alternate">
|
||||
<td class="label"><a href="http:///example.com/" onclick="_gaq.push(['_trackEvent', 'outbound-article', 'http:///example.com/', 'About Test User']);">About Test User</a></td>
|
||||
<td class="views">1</td>
|
||||
<td class="more">More</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label"><a href="http://example.com/" onclick="_gaq.push(['_trackEvent', 'outbound-article', 'http://example.com/', '260']);">260</a></td>
|
||||
<td class="views">1</td>
|
||||
<td class="more">More</td>
|
||||
</tr>
|
||||
<tr class="alternate">
|
||||
<td class="label"><a href="http://example.com" onclick="_gaq.push(['_trackEvent', 'outbound-article', 'http://example.com', 'Archives']);">Archives</a></td>
|
||||
<td class="views">1</td>
|
||||
<td class="more">More</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label"><a href="http://example.com" onclick="_gaq.push(['_trackEvent', 'outbound-article', 'http://example.com', '235']);">235</a></td>
|
||||
<td class="views">1</td>
|
||||
<td class="more">More</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2>List Type Tests</h2>
|
||||
<h3>Definition List</h3>
|
||||
<dl>
|
||||
<dt>Definition List Title</dt>
|
||||
<dd>This is a definition list division.</dd>
|
||||
<dt>Definition</dt>
|
||||
<dd>
|
||||
An exact statement or description of the nature, scope, or meaning of something: <em>our definition of what constitutes poetry.</em>
|
||||
</dd>
|
||||
<dt>Gallery</dt>
|
||||
<dd>A feature introduced with WordPress 2.5, that is specifically an exposition of images attached to a post. In that same vein, an upload is “attached to a post” when you upload it while editing a post.</dd>
|
||||
<dt>Gravatar</dt>
|
||||
<dd>A globally recognized avatar (a graphic image or picture that represents a user). A gravatar is associated with an email address, and is maintained by the Gravatar.com service. Using this service, a blog owner can configure their blog so that a user’s gravatar is displayed along with their comments.</dd>
|
||||
</dl>
|
||||
<h3>Unordered List (Nested)</h3>
|
||||
<ul>
|
||||
<li>List item one
|
||||
<ul>
|
||||
<li>List item one
|
||||
<ul>
|
||||
<li>List item one</li>
|
||||
<li>List item two</li>
|
||||
<li>List item three</li>
|
||||
<li>List item four</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>List item two</li>
|
||||
<li>List item three</li>
|
||||
<li>List item four</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>List item two</li>
|
||||
<li>List item three</li>
|
||||
<li>List item four</li>
|
||||
</ul>
|
||||
<h3>Ordered List</h3>
|
||||
<ol>
|
||||
<li>List item one
|
||||
<ol>
|
||||
<li>List item one
|
||||
<ol>
|
||||
<li>List item one</li>
|
||||
<li>List item two</li>
|
||||
<li>List item three</li>
|
||||
<li>List item four</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>List item two</li>
|
||||
<li>List item three</li>
|
||||
<li>List item four</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>List item two</li>
|
||||
<li>List item three</li>
|
||||
<li>List item four</li>
|
||||
</ol>
|
||||
<h2>HTML Element Tag Tests</h2>
|
||||
<p>
|
||||
All other HTML tags listed in the <a href="http://en.support.wordpress.com/code/" onclick="_gaq.push(['_trackEvent', 'outbound-article', 'http://en.support.wordpress.com/code/', 'FAQ']);">FAQ</a>:
|
||||
</p>
|
||||
<p>
|
||||
Here is the address for Automattic, using the
|
||||
<code>
|
||||
<address>
|
||||
</code>
|
||||
tag:
|
||||
</p>
|
||||
<address>
|
||||
355 1st Street Suite 202<br /> San Francisco, CA 94105<br /> United States
|
||||
</address>
|
||||
<p>
|
||||
This is an example of <a href="http://example.com" onclick="_gaq.push(['_trackEvent', 'outbound-article', 'http://example.com', 'an <anchor>']);">an <code>
|
||||
<anchor>
|
||||
</code></a> (otherwise known as a link). This <abbr title="abbreviation">abbr.</abbr> is an example of an <abbr> tag in the middle of a sentence. Here is a <acronym title="three-letter acronym">TLA</acronym> showing off the <code>
|
||||
<acronym>
|
||||
</code> tag. What, you want to see <big>some over-sized text</big> using the <code>
|
||||
<big>
|
||||
</code> tag? Can you <cite>cite a reference</cite> for that, using the <code>
|
||||
<cite>
|
||||
</code> tag? Have you noticed that all of the tag names are displayed <code>in code-form</code>, using the <code>
|
||||
<code></code>
|
||||
tag? Similarly, I could
|
||||
<kbd>emulate keyboard text</kbd>
|
||||
, using the
|
||||
<code>
|
||||
<kbd>
|
||||
</code>
|
||||
text tag, or
|
||||
<tt>emulate teletype text</tt>
|
||||
using the
|
||||
<code>
|
||||
<tt>
|
||||
</code>
|
||||
tag.
|
||||
</p>
|
||||
<p>
|
||||
Oh no! I wrote something incorrectly.
|
||||
<del>I’d better delete it</del>
|
||||
, using the
|
||||
<code>
|
||||
<del>
|
||||
</code>
|
||||
tag. I could alternately <span style="text-decoration: line-through;">strike something out</span> using the
|
||||
<code>
|
||||
<strike>
|
||||
</code>
|
||||
tag, or strike something out using the
|
||||
<code>
|
||||
<s>
|
||||
</code>
|
||||
tag. <em>So many choices</em>, which I emphasize using the
|
||||
<code>
|
||||
<em>
|
||||
</code>
|
||||
tag. Just to clarify,
|
||||
<ins>this is some inserted text</ins>
|
||||
, that I’ll highlight using the
|
||||
<code>
|
||||
<ins>
|
||||
</code>
|
||||
tag.
|
||||
</p>
|
||||
<p>
|
||||
Need to display completely unformatted text, such as a large block of code? Use the
|
||||
<code>
|
||||
<pre>
|
||||
</code>
|
||||
tag, which lets you display:
|
||||
</p>
|
||||
<pre>#container {
|
||||
float: left;
|
||||
margin: 0 -240px 0 0;
|
||||
width: 100%;
|
||||
}</pre>
|
||||
<p>
|
||||
Want to quote the WordPress tagline <q>Code is Poetry</q>? Use the
|
||||
<code>
|
||||
<q>
|
||||
</code>
|
||||
tag to add quotes around it. <strong>This is strong text</strong> (otherwise known as bold), using the
|
||||
<code>
|
||||
<strong>
|
||||
</code>
|
||||
tag.
|
||||
</p>
|
||||
<p>
|
||||
Need to write H<sub>2</sub>O or E = MC<sup>2</sup>? You may find great use for <sub>subscripting</sub> text using the
|
||||
<code>
|
||||
<sub>
|
||||
</code>
|
||||
tag, or for <sup>superscripting</sup> text using the
|
||||
<code>
|
||||
<sup>
|
||||
</code>
|
||||
tag. Need to call out a
|
||||
<var>variable</var>
|
||||
? Use the
|
||||
<code>
|
||||
<var>
|
||||
</code>
|
||||
tag.
|
||||
</p>
|
||||
<h2>Div and Span Tests</h2>
|
||||
<div>
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
|
||||
<div class="myclass">
|
||||
<strong>This is a div with “myclass” class, inside of another div, using the <code>
|
||||
<div>
|
||||
</code> tag.
|
||||
</strong>
|
||||
</div>
|
||||
<p>Sed odio nibh, tincidunt adipiscing, pretium nec, tincidunt id, enim. Fusce scelerisque nunc vitae nisl.</p>
|
||||
</div>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <span><strong>This is a span inside of a paragraph, using the <code>
|
||||
<span>
|
||||
</code> tag.
|
||||
</strong></span> Sed odio nibh, tincidunt adipiscing, pretium nec, tincidunt id, enim. Fusce scelerisque nunc vitae nisl.
|
||||
</p>
|
||||
<p>
|
||||
</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>
|
||||
Reference in New Issue
Block a user