Skip to content

Commit 2ab1e38

Browse files
MrRioMrRio
committed
Merge pull request #419 from Flamenco/css_page_break
Css page break
2 parents 15660c8 + 6e678a5 commit 2ab1e38

File tree

2 files changed

+222
-0
lines changed

2 files changed

+222
-0
lines changed

‎test/test_from_html_css_page_breaks.html‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<!doctype html>
2+
<!--
3+
/**
4+
* jsPDF Test HTML PlugIn
5+
* Copyright (c) 2014 Steven Spungin (TwelveTone LLC) [email protected]
6+
*
7+
* Licensed under the MIT License.
8+
* http://opensource.org/licenses/mit-license
9+
*/
10+
-->
11+
12+
<html>
13+
<head>
14+
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
15+
16+
<title>Test HTML</title>
17+
18+
<!-- Required Files -->
19+
<script type="text/javascript" src="../jspdf.js"></script>
20+
<!-- Plugin Dependencies -->
21+
<script type="text/javascript" src="../jspdf.plugin.standard_fonts_metrics.js"></script>
22+
<script type="text/javascript" src="../jspdf.plugin.split_text_to_size.js"></script>
23+
<script type="text/javascript" src="../jspdf.plugin.from_html.js"></script>
24+
<!-- Plugin To Test -->
25+
<script type="text/javascript" src="test_harness.js"></script>
26+
<!-- Test Dependencies -->
27+
28+
<script>
29+
pdf_test_harness.onload = function(harness) {
30+
var pdf = new jsPDF('p', 'pt', 'letter');
31+
var ta = document.getElementById('textarea');
32+
33+
pdf.fromHTML(ta.value, 0, 0);
34+
35+
ta.onkeyup = function(){
36+
var pdf = new jsPDF('p', 'pt', 'letter');
37+
pdf.fromHTML(ta.value, 0, 0);
38+
harness.setPdf(pdf);
39+
}
40+
41+
harness.header.style.left='300px';
42+
harness.body.style.left='300px';
43+
44+
return pdf;
45+
}
46+
47+
48+
</script>
49+
50+
</head>
51+
52+
<body style='background-color: silver; margin: 0;'>
53+
<textarea id='textarea' style='position:fixed;left:0;width:290px;height:100%'>
54+
55+
<html>
56+
<head>
57+
<style>
58+
.break{
59+
page-break-before:always;
60+
}
61+
body{
62+
font-size:2em;
63+
}
64+
</style>
65+
</head>
66+
<body>
67+
<div>page 1 <em>ok?</em></div>
68+
<div class='break'>page 2</div>
69+
<div class='break' style='margin-top:1in'>page 3</div>
70+
</body>
71+
</html>
72+
73+
</textarea>
74+
</body>
75+
</html>

‎test/test_harness.js‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
onload = function() {
2+
3+
var harness = new pdf_test_harness();
4+
5+
var body = document.getElementsByTagName('body')[0];
6+
body.style.display = 'flex';
7+
8+
var div = document.createElement('div');
9+
div.setAttribute('style', 'position:fixed;height:20px;left:0;right:0;background:lightblue');
10+
body.appendChild(div);
11+
harness.header = div;
12+
13+
var div2 = document.createElement('div');
14+
div2.setAttribute('style', 'position:fixed;display:flex;top:20px; bottom:0;left:0;right:0');
15+
body.appendChild(div2);
16+
harness.body = div2;
17+
18+
var btn1 = document.createElement('input');
19+
btn1.setAttribute('type', 'radio');
20+
btn1.setAttribute('name', 'view');
21+
div.appendChild(btn1);
22+
btn1.checked = true;
23+
24+
var lbl1 = document.createElement('label');
25+
lbl1.setAttribute('for', 'btn1');
26+
lbl1.innerHTML = 'PDF'
27+
div.appendChild(lbl1);
28+
29+
var btn2 = document.createElement('input');
30+
btn2.setAttribute('type', 'radio');
31+
btn2.setAttribute('name', 'view');
32+
div.appendChild(btn2);
33+
34+
var lbl2 = document.createElement('label');
35+
lbl2.setAttribute('for', 'btn2');
36+
lbl2.innerHTML = 'Source'
37+
div.appendChild(lbl2);
38+
39+
var btn3 = document.createElement('input');
40+
btn3.setAttribute('type', 'radio');
41+
btn3.setAttribute('name', 'view');
42+
div.appendChild(btn3);
43+
44+
var lbl3 = document.createElement('label');
45+
lbl3.setAttribute('for', 'btn3');
46+
lbl3.innerHTML = 'Both'
47+
div.appendChild(lbl3);
48+
49+
harness.source = document.createElement('pre');
50+
harness.source.setAttribute('style', 'margin-top:0;width:100%;height:100%;position:absolute;top:0px;bottom:0px;overflow:auto');
51+
div2.appendChild(harness.source);
52+
53+
harness.iframe = document.createElement('iframe');
54+
harness.iframe.setAttribute('style', 'width:100%;height:100%;position:absolute;overflow:auto;top:0px;bottom:0px');
55+
div2.appendChild(harness.iframe);
56+
57+
if (pdf_test_harness.onload) {
58+
harness.pdf = pdf_test_harness.onload(harness);
59+
if (harness.message){
60+
var popup = document.createElement('div');
61+
popup.setAttribute('style', 'position:fixed;margin:auto;top:50px;background-color:beige;padding:1em;border:1px solid black');
62+
popup.innerHTML = harness.message;
63+
body.appendChild(popup);
64+
popup.onclick = function(){
65+
popup.parentNode.removeChild(popup);
66+
}
67+
68+
}
69+
}
70+
71+
harness.render('pdf');
72+
73+
btn1.onclick = function() {
74+
harness.render('pdf');
75+
}
76+
btn2.onclick = function() {
77+
harness.render('source');
78+
}
79+
btn3.onclick = function() {
80+
harness.render('both');
81+
}
82+
}
83+
84+
pdf_test_harness = function(pdf) {
85+
this.pdf = pdf;
86+
this.onload = undefined;
87+
this.iframe = undefined;
88+
89+
this.entityMap = {
90+
"&" : "&amp;",
91+
"<" : "&lt;",
92+
">" : "&gt;",
93+
'"' : '&quot;',
94+
"'" : '&#39;',
95+
"/" : '&#x2F;'
96+
};
97+
98+
this.escapeHtml = function(string) {
99+
return String(string).replace(/[&<>"'\/]/g, function(s) {
100+
return this.entityMap[s];
101+
}.bind(this));
102+
};
103+
104+
this.getParameterByName = function(name) {
105+
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
106+
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"), results = regex.exec(location.search);
107+
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
108+
};
109+
110+
this.setPdf = function(pdf) {
111+
this.pdf = pdf;
112+
this.rendered = undefined;
113+
this.render(this.view);
114+
};
115+
116+
// generate the pdf, the source code, or both
117+
this.render = function(view) {
118+
this.view = view;
119+
//Current code only lets us render one time.
120+
if (!this.rendered) {
121+
this.rendered = this.pdf.output('datauristring');
122+
this.iframe.src = this.rendered;
123+
var raw = this.pdf.output();
124+
raw = this.escapeHtml(raw);
125+
this.source.innerHTML = raw;
126+
}
127+
if ('pdf' === view) {
128+
this.source.style.display = 'none';
129+
this.iframe.style.display = 'block';
130+
this.iframe.style.width = '100%';
131+
} else if ('source' === view) {
132+
this.iframe.style.display = 'none';
133+
this.source.style.display = 'block';
134+
this.source.style.width = '100%';
135+
}
136+
137+
if ('both' === view) {
138+
raw = this.escapeHtml(raw);
139+
this.iframe.style.width = '50%';
140+
this.iframe.style.position = 'relative';
141+
this.iframe.style.display = 'inline-block';
142+
this.source.style.width = '50%';
143+
this.source.style.position = 'relative';
144+
this.source.style.display = 'inline-block';
145+
}
146+
}
147+
}

0 commit comments

Comments
 (0)