forked from parallax/jsPDF
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtotal_mess.html
More file actions
269 lines (265 loc) · 8.53 KB
/
Copy pathtotal_mess.html
File metadata and controls
269 lines (265 loc) · 8.53 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
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>