Skip to content

Commit 1bdf66c

Browse files
FlamencoFlamenco
committed
html2pdf plugin
canvas plugin unsupported fonts should fallback to defaults annotations support internal named targets text annotation support context2d auto page breaks context2d page random access context2d font size fix require.js support test harness updates css color logic refactored into separate file
1 parent b445f5b commit 1bdf66c

28 files changed

Lines changed: 3300 additions & 565 deletions

examples/html2pdf/demo_autobreak.html renamed to examples/html2pdf/auto_break.html

Lines changed: 18 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<title>Html2Pdf</title>
4+
<title>context2d auto-break</title>
5+
<link rel="stylesheet" type="text/css" href="examples.css">
56
<style>
67
</style>
78
</head>
89
<body>
9-
<div style='position: absolute; left: 0; top: 0; bottom: 0; overflow: auto'>
10+
<div style='position: absolute; left: 0; top: 0; bottom: 0; width:400px; overflow: auto'>
1011
<h1>Autobreak</h1>
11-
<p>jsPDF was tweaked to auto-page-break a document into multiple pages.</p>
12-
<p>The auto-page-break allows vertical positioning beyond the PDF page; It is currently only working for text and arcs</p>
12+
<p>The context2d plugin was tweaked to auto-break a document into multiple pages.</p>
13+
<p>The auto-page-break feature allows vertical positioning by addressing the Y coordinate beyond the PDF page.</p>
1314
<ol>
1415
<li>OL Item</li>
1516
<li>OL Item</li>
@@ -140,30 +141,21 @@ <h1>Autobreak</h1>
140141
</ol>
141142
</div>
142143

143-
<!-- the library -->
144-
<script type="text/javascript" src="../../jspdf.js"></script>
145-
<!-- required by the plugin -->
146-
<script type="text/javascript" src="../../jspdf.plugin.standard_fonts_metrics.js"></script>
147-
<script type="text/javascript" src="../../jspdf.plugin.split_text_to_size.js"></script>
148-
<script type="text/javascript" src="../../jspdf.plugin.addimage.js"></script>
149-
<!-- the plugin -->
150-
<script type="text/javascript" src="../../jspdf.plugin.context2d.js"></script>
151-
<script type="text/javascript" src="../../jspdf.plugin.canvas.js"></script>
144+
<script src='../../libs/require/require.js'></script>
152145

153-
<script type="text/javascript" src="../../libs/html2canvas/dist/html2canvas.js"></script>
154-
155-
<script type="text/javascript">
156-
var pdf = new jsPDF('p', 'pt', 'letter');
146+
<script>
147+
require_baseUrl_override = '../..';
148+
require(['../../libs/require/config'], function(){
149+
require(['html2pdf'], function(){
150+
var pdf = new jsPDF('p', 'pt', 'letter');
157151
var canvas = pdf.canvas;
152+
canvas.height = 72 * 11;
153+
canvas.width=72 * 8.5;;
154+
// var width = 400;
158155

159-
var width = 400;
160-
canvas.width=width;
161-
document.body.style.width = width + 'px';
156+
document.body.style.width = 400 + 'px';
162157

163-
html2canvas(document.body, {
164-
canvas:canvas,
165-
width:width,
166-
onrendered: function(canvas) {
158+
html2pdf(document.body, pdf, function(pdf) {
167159
var iframe = document.createElement('iframe');
168160
iframe.setAttribute('style','position:absolute;right:0; top:0; bottom:0; height:100%; width:500px');
169161
document.body.appendChild(iframe);
@@ -173,6 +165,8 @@ <h1>Autobreak</h1>
173165
//div.innerText=pdf.output();
174166
//document.body.appendChild(div);
175167
}
168+
);
169+
});
176170
});
177171
</script>
178172
</body>

‎examples/html2pdf/demo.css‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎examples/html2pdf/examples.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@CHARSET "UTF-8";

‎examples/html2pdf/images/favicon.png‎

27.5 KB
Loading

examples/html2pdf/demo_lists.html renamed to examples/html2pdf/lists.html

Lines changed: 32 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,14 @@
22
<html>
33
<head>
44
<title>Html2Pdf</title>
5-
<link rel="stylesheet" type="text/css" href="demo.css">
5+
<link rel="stylesheet" type="text/css" href="examples.css">
66
<style>
77
</style>
88
</head>
99
<body>
1010
<div style='position: absolute'>
1111
<h1>Ordered And Unordered Lists</h1>
12+
<h2>Implemented</h2>
1213
<ol>
1314
<li>OL Item (default)</li>
1415
<li style='list-style-type: decimal'>OL Item (decimal)</li>
@@ -23,32 +24,37 @@ <h1>Ordered And Unordered Lists</h1>
2324
<li style='list-style-type: square'>UL Item (square)</li>
2425
<li style='list-style-type: disc'>UL Item (disc)</li>
2526
</ul>
26-
</div>
2727

28-
<!-- the library -->
29-
<script type="text/javascript" src="../../jspdf.js"></script>
30-
<!-- required by the plugin -->
31-
<script type="text/javascript" src="../../jspdf.plugin.standard_fonts_metrics.js"></script>
32-
<script type="text/javascript" src="../../jspdf.plugin.split_text_to_size.js"></script>
33-
<script type="text/javascript" src="../../jspdf.plugin.addimage.js"></script>
34-
<!-- the plugin -->
35-
<script type="text/javascript" src="../../jspdf.plugin.context2d.js"></script>
36-
<script type="text/javascript" src="../../jspdf.plugin.canvas.js"></script>
28+
<h2>Not Implemented</h2>
29+
<pre>
30+
upper-latin
31+
lower-latin
32+
armenian
33+
cjk-ideographic
34+
decimal-leading-zero
35+
georgian
36+
hebrew
37+
hiragana
38+
hiragana-iroha
39+
katakana
40+
katakana-iroha
41+
</pre>
42+
</div>
3743

38-
<script type="text/javascript" src="../../libs/html2canvas/dist/html2canvas.js"></script>
44+
<script src='../../libs/require/require.js'></script>
3945

40-
<script type="text/javascript">
41-
var pdf = new jsPDF('p', 'pt', 'letter');
46+
<script>
47+
require_baseUrl_override = '../..';
48+
require(['../../libs/require/config'], function(){
49+
require(['html2pdf'], function(){
50+
51+
var pdf = new jsPDF('p', 'pt', 'letter');
4252
var canvas = pdf.canvas;
43-
44-
var width = 400;
45-
canvas.width=width;
46-
document.body.style.width = width + 'px';
47-
48-
html2canvas(document.body, {
49-
canvas:canvas,
50-
width:width,
51-
onrendered: function(canvas) {
53+
canvas.height = 72 * 11;
54+
canvas.width=72 * 8.5;;
55+
// var width = 400;
56+
57+
html2pdf(document.body, pdf, function(canvas) {
5258
var iframe = document.createElement('iframe');
5359
iframe.setAttribute('style','position:absolute;right:0; top:0; bottom:0; height:100%; width:500px');
5460
document.body.appendChild(iframe);
@@ -58,6 +64,9 @@ <h1>Ordered And Unordered Lists</h1>
5864
//div.innerText=pdf.output();
5965
//document.body.appendChild(div);
6066
}
67+
);
68+
69+
});
6170
});
6271
</script>
6372
</body>

‎examples/html2pdf/page_break.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Page Break Test</title>
5+
<link rel="stylesheet" type="text/css" href="examples.css">
6+
<style>
7+
table,td {
8+
border: 1px solid silver;
9+
border-collapse: collapse
10+
}
11+
12+
td {
13+
padding: .5em
14+
}
15+
</style>
16+
</head>
17+
<body>
18+
<div style='position: absolute; left: 0; top: 0; bottom: 0; overflow: auto; width: 400px'>
19+
This example show how the <em>page-break-before</em> style is rendered.
20+
21+
<h1 style='page-break-before: always'>Numbers</h1>
22+
<p>1</p>
23+
<p>2</p>
24+
<p>3</p>
25+
<p>4</p>
26+
27+
<h1 style='page-break-before: always'>Letters </h1>
28+
<p>a</p>
29+
<p>b</p>
30+
<p>c</p>
31+
<p>d</p>
32+
33+
<h1 style='page-break-before: always'>Text</h1>
34+
<p>This is the content.</p>
35+
36+
</div>
37+
38+
<script src='../../libs/require/require.js'></script>
39+
40+
<script>
41+
require_baseUrl_override = '../..';
42+
require(['../../libs/require/config'], function(){
43+
require(['html2pdf'], function(){
44+
45+
var pdf = new jsPDF('p', 'pt', 'letter');
46+
pdf.canvas.height = 72 * 11;
47+
pdf.canvas.width = 72 * 8.5;
48+
49+
//html2pdf(document.documentElement.innerHTML, pdf, function(pdf){
50+
html2pdf(document.body, pdf, function(pdf){
51+
var iframe = document.createElement('iframe');
52+
iframe.setAttribute('style','position:absolute;right:0; top:0; bottom:0; height:100%; width:500px');
53+
document.body.appendChild(iframe);
54+
iframe.src = pdf.output('datauristring');
55+
});
56+
});
57+
});
58+
</script>
59+
</body>
60+
</html>

examples/html2pdf/demo_pdf.html renamed to examples/html2pdf/pdf.html

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -153,20 +153,14 @@ <h1>sing to me, erbarme dich</h1>
153153
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>.
154154
</p>
155155

156-
<!-- the library -->
157-
<script type="text/javascript" src="../../jspdf.js"></script>
158-
<!-- required by the plugin -->
159-
<script type="text/javascript" src="../../jspdf.plugin.standard_fonts_metrics.js"></script>
160-
<script type="text/javascript" src="../../jspdf.plugin.split_text_to_size.js"></script>
161-
<script type="text/javascript" src="../../jspdf.plugin.addimage.js"></script>
162-
<!-- the plugin -->
163-
<script type="text/javascript" src="../../jspdf.plugin.context2d.js"></script>
164-
<script type="text/javascript" src="../../jspdf.plugin.canvas.js"></script>
165-
166-
<script type="text/javascript" src="../../libs/html2canvas/dist/html2canvas.js"></script>
167-
168-
<script type="text/javascript">
169-
var pdf = new jsPDF('p', 'pt', 'letter');
156+
<script src='../../libs/require/require.js'></script>
157+
158+
<script>
159+
require_baseUrl_override = '../..';
160+
require(['../../libs/require/config'], function(){
161+
require(['html2pdf'], function(){
162+
163+
var pdf = new jsPDF('p', 'pt', 'letter');
170164
var canvas = pdf.canvas;
171165

172166
canvas.width=8.5*72;
@@ -184,6 +178,8 @@ <h1>sing to me, erbarme dich</h1>
184178
//document.body.appendChild(div);
185179
}
186180
});
181+
});
182+
});
187183
</script>
188184
</body>
189185
</html>

examples/html2pdf/demo2_pdf.html renamed to examples/html2pdf/pdf2.html

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ <h1>Heading</h1>
4545
Followed by some text wrapped in a <b>&lt;p&gt; paragraph.</b>
4646
</p>
4747
<p>
48-
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>.
48+
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>.
4949
</p>
5050
<hr />
5151
<h2>More content</h2>
@@ -58,20 +58,14 @@ <h2>More content</h2>
5858
</div>
5959
</div>
6060

61-
<!-- the library -->
62-
<script type="text/javascript" src="../../jspdf.js"></script>
63-
<!-- required by the plugin -->
64-
<script type="text/javascript" src="../../jspdf.plugin.standard_fonts_metrics.js"></script>
65-
<script type="text/javascript" src="../../jspdf.plugin.split_text_to_size.js"></script>
66-
<script type="text/javascript" src="../../jspdf.plugin.addimage.js"></script>
67-
<!-- the plugin -->
68-
<script type="text/javascript" src="../../jspdf.plugin.context2d.js"></script>
69-
<script type="text/javascript" src="../../jspdf.plugin.canvas.js"></script>
61+
<script src='../../libs/require/require.js'></script>
7062

71-
<script type="text/javascript" src="../../libs/html2canvas/dist/html2canvas.js"></script>
72-
73-
<script type="text/javascript">
74-
var pdf = new jsPDF('p', 'pt', 'letter');
63+
<script>
64+
require_baseUrl_override = '../..';
65+
require(['../../libs/require/config'], function(){
66+
require(['html2pdf'], function(){
67+
68+
var pdf = new jsPDF('p', 'pt', 'letter');
7569
var canvas = pdf.canvas;
7670

7771
var width = 600;
@@ -91,6 +85,9 @@ <h2>More content</h2>
9185
//document.body.appendChild(div);
9286
}
9387
});
88+
89+
});
90+
});
9491
</script>
9592
</body>
9693
</html>

examples/html2pdf/demo_showcase.html renamed to examples/html2pdf/showcase.html

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,12 @@
22
<html>
33
<head>
44
<title>Html2Pdf</title>
5+
<link rel="stylesheet" type="text/css" href="examples.css">
56
<style>
67
</style>
78
</head>
89
<body>
9-
<div style='position: absolute; left: 0; top: 0; bottom: 0; overflow: auto; width: 400px'>
10+
<div style='position: absolute; left: 0; top: 0; bottom: 0; overflow: auto; width: 400px'>
1011

1112

1213
<h1>Html2Pdf</h1>
@@ -64,27 +65,20 @@ <h2>Font Size</h2>
6465

6566
</div>
6667

67-
<!-- the library -->
68-
<script type="text/javascript" src="../../jspdf.js"></script>
69-
<!-- required by the plugin -->
70-
<script type="text/javascript" src="../../jspdf.plugin.standard_fonts_metrics.js"></script>
71-
<script type="text/javascript" src="../../jspdf.plugin.split_text_to_size.js"></script>
72-
<script type="text/javascript" src="../../jspdf.plugin.addimage.js"></script>
73-
<!-- the plugin -->
74-
<script type="text/javascript" src="../../jspdf.plugin.context2d.js"></script>
75-
<script type="text/javascript" src="../../jspdf.plugin.canvas.js"></script>
68+
<script src='../../libs/require/require.js'></script>
7669

77-
<script type="text/javascript" src="../../libs/html2canvas/dist/html2canvas.js"></script>
70+
<script>
71+
require_baseUrl_override = '../..';
72+
require(['../../libs/require/config'], function(){
73+
require(['html2pdf'], function(){
7874

79-
<script type="text/javascript">
80-
var pdf = new jsPDF('p', 'pt', 'letter');
75+
var pdf = new jsPDF('p', 'pt', 'letter');
8176
var canvas = pdf.canvas;
82-
83-
canvas.width=8.5*72;
84-
85-
html2canvas(document.body, {
86-
canvas:canvas,
87-
onrendered: function(canvas) {
77+
canvas.height = 72 * 11;
78+
canvas.width=72 * 8.5;;
79+
// var width = 400;
80+
81+
html2pdf(document.body, pdf, function(pdf) {
8882
var iframe = document.createElement('iframe');
8983
iframe.setAttribute('style','position:absolute;right:0; top:0; bottom:0; height:100%; width:500px');
9084
document.body.appendChild(iframe);
@@ -94,6 +88,9 @@ <h2>Font Size</h2>
9488
//div.innerText=pdf.output();
9589
//document.body.appendChild(div);
9690
}
91+
);
92+
93+
});
9794
});
9895
</script>
9996
</body>

0 commit comments

Comments
 (0)