Skip to content

Commit b445f5b

Browse files
FlamencoFlamenco
committed
added html2canvas.js
1 parent 73722b5 commit b445f5b

37 files changed

Lines changed: 6944 additions & 0 deletions

‎examples/html2pdf/demo.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@CHARSET "UTF-8";
2+
3+
h1 {
4+
font-size: 2em;
5+
text-align: center;
6+
}

‎examples/html2pdf/demo2_pdf.html‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title></title>
5+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6+
<style>
7+
.feedback-overlay-black {
8+
background-color: #000;
9+
opacity: 0.5;
10+
position: absolute;
11+
top: 0;
12+
left: 0;
13+
width: 100%;
14+
height: 100%;
15+
margin: 0;
16+
}
17+
</style>
18+
19+
<style>
20+
div {
21+
padding: 20px;
22+
margin: 0 auto;
23+
border: 5px solid black;
24+
}
25+
26+
h1 {
27+
border-bottom: 2px solid white;
28+
}
29+
30+
h2 {
31+
background: #efefef;
32+
padding: 10px;
33+
}
34+
</style>
35+
</head>
36+
<body>
37+
<div style="background: red;">
38+
<div style="background: green;">
39+
<div style="background: blue; border-color: white;">
40+
<div style="background: yellow;">
41+
<div style="background: orange;">
42+
<h1>Heading</h1>
43+
Text that isn't wrapped in anything.
44+
<p>
45+
Followed by some text wrapped in a <b>&lt;p&gt; paragraph.</b>
46+
</p>
47+
<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>.
49+
</p>
50+
<hr />
51+
<h2>More content</h2>
52+
<div style="width: 10px; height: 10px; border-width: 10px; padding: 0;">a</div>
53+
</div>
54+
</div>
55+
56+
</div>
57+
58+
</div>
59+
</div>
60+
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>
70+
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');
75+
var canvas = pdf.canvas;
76+
77+
var width = 600;
78+
//canvas.width=8.5*72;
79+
document.body.style.width=width + "px";
80+
81+
html2canvas(document.body, {
82+
canvas:canvas,
83+
onrendered: function(canvas) {
84+
var iframe = document.createElement('iframe');
85+
iframe.setAttribute('style', 'position:absolute;top:0;right:0;height:100%; width:600px');
86+
document.body.appendChild(iframe);
87+
iframe.src = pdf.output('datauristring');
88+
89+
//var div = document.createElement('pre');
90+
//div.innerText=pdf.output();
91+
//document.body.appendChild(div);
92+
}
93+
});
94+
</script>
95+
</body>
96+
</html>

‎examples/html2pdf/demo_autobreak.html‎

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Html2Pdf</title>
5+
<style>
6+
</style>
7+
</head>
8+
<body>
9+
<div style='position: absolute; left: 0; top: 0; bottom: 0; overflow: auto'>
10+
<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>
13+
<ol>
14+
<li>OL Item</li>
15+
<li>OL Item</li>
16+
<li>OL Item</li>
17+
<li>OL Item</li>
18+
<li>OL Item</li>
19+
<li>OL Item</li>
20+
<li>OL Item</li>
21+
<li>OL Item</li>
22+
<li>OL Item</li>
23+
<li>OL Item</li>
24+
<li>OL Item</li>
25+
<li>OL Item</li>
26+
<li>OL Item</li>
27+
<li>OL Item</li>
28+
<li>OL Item</li>
29+
<li>OL Item</li>
30+
<li>OL Item</li>
31+
<li>OL Item</li>
32+
<li>OL Item</li>
33+
<li>OL Item</li>
34+
<li>OL Item</li>
35+
<li>OL Item</li>
36+
<li>OL Item</li>
37+
<li>OL Item</li>
38+
<li>OL Item</li>
39+
<li>OL Item</li>
40+
<li>OL Item</li>
41+
<li>OL Item</li>
42+
<li>OL Item</li>
43+
<li>OL Item</li>
44+
<li>OL Item</li>
45+
<li>OL Item</li>
46+
<li>OL Item</li>
47+
<li>OL Item</li>
48+
<li>OL Item</li>
49+
<li>OL Item</li>
50+
<li>OL Item</li>
51+
<li>OL Item</li>
52+
<li>OL Item</li>
53+
<li>OL Item</li>
54+
<li>OL Item</li>
55+
<li>OL Item</li>
56+
<li>OL Item</li>
57+
<li>OL Item</li>
58+
<li>OL Item</li>
59+
<li>OL Item</li>
60+
<li>OL Item</li>
61+
<li>OL Item</li>
62+
<li>OL Item</li>
63+
<li>OL Item</li>
64+
<li>OL Item</li>
65+
<li>OL Item</li>
66+
<li>OL Item</li>
67+
<li>OL Item</li>
68+
<li>OL Item</li>
69+
<li>OL Item</li>
70+
<li>OL Item</li>
71+
<li>OL Item</li>
72+
<li>OL Item</li>
73+
<li>OL Item</li>
74+
<li>OL Item</li>
75+
<li>OL Item</li>
76+
<li>OL Item</li>
77+
<li>OL Item</li>
78+
<li>OL Item</li>
79+
<li>OL Item</li>
80+
<li>OL Item</li>
81+
<li>OL Item</li>
82+
<li>OL Item</li>
83+
<li>OL Item</li>
84+
<li>OL Item</li>
85+
<li>OL Item</li>
86+
<li>OL Item</li>
87+
<li>OL Item</li>
88+
<li>OL Item</li>
89+
<li>OL Item</li>
90+
<li>OL Item</li>
91+
<li>OL Item</li>
92+
<li>OL Item</li>
93+
<li>OL Item</li>
94+
<li>OL Item</li>
95+
<li>OL Item</li>
96+
<li>OL Item</li>
97+
<li>OL Item</li>
98+
<li>OL Item</li>
99+
<li>OL Item</li>
100+
<li>OL Item</li>
101+
<li>OL Item</li>
102+
<li>OL Item</li>
103+
<li>OL Item</li>
104+
<li>OL Item</li>
105+
<li>OL Item</li>
106+
<li>OL Item</li>
107+
<li>OL Item</li>
108+
<li>OL Item</li>
109+
<li>OL Item</li>
110+
<li>OL Item</li>
111+
<li>OL Item</li>
112+
<li>OL Item</li>
113+
<li>OL Item</li>
114+
<li>OL Item</li>
115+
<li>OL Item</li>
116+
<li>OL Item</li>
117+
<li>OL Item</li>
118+
<li>OL Item</li>
119+
<li>OL Item</li>
120+
<li>OL Item</li>
121+
<li>OL Item</li>
122+
<li>OL Item</li>
123+
<li>OL Item</li>
124+
<li>OL Item</li>
125+
<li>OL Item</li>
126+
<li>OL Item</li>
127+
<li>OL Item</li>
128+
<li>OL Item</li>
129+
<li>OL Item</li>
130+
<li>OL Item</li>
131+
<li>OL Item</li>
132+
<li>OL Item</li>
133+
<li>OL Item</li>
134+
<li>OL Item</li>
135+
<li>OL Item</li>
136+
<li>OL Item</li>
137+
<li>OL Item</li>
138+
<li>OL Item</li>
139+
<li>OL Item</li>
140+
</ol>
141+
</div>
142+
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>
152+
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');
157+
var canvas = pdf.canvas;
158+
159+
var width = 400;
160+
canvas.width=width;
161+
document.body.style.width = width + 'px';
162+
163+
html2canvas(document.body, {
164+
canvas:canvas,
165+
width:width,
166+
onrendered: function(canvas) {
167+
var iframe = document.createElement('iframe');
168+
iframe.setAttribute('style','position:absolute;right:0; top:0; bottom:0; height:100%; width:500px');
169+
document.body.appendChild(iframe);
170+
iframe.src = pdf.output('datauristring');
171+
172+
//var div = document.createElement('pre');
173+
//div.innerText=pdf.output();
174+
//document.body.appendChild(div);
175+
}
176+
});
177+
</script>
178+
</body>
179+
</html>

‎examples/html2pdf/demo_lists.html‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Html2Pdf</title>
5+
<link rel="stylesheet" type="text/css" href="demo.css">
6+
<style>
7+
</style>
8+
</head>
9+
<body>
10+
<div style='position: absolute'>
11+
<h1>Ordered And Unordered Lists</h1>
12+
<ol>
13+
<li>OL Item (default)</li>
14+
<li style='list-style-type: decimal'>OL Item (decimal)</li>
15+
<li style='list-style-type: upper-alpha'>OL Item (upper-alpha)</li>
16+
<li style='list-style-type: lower-alpha'>OL Item (lower-alpha)</li>
17+
<li style='list-style-type: upper-roman'>OL Item (upper-roman)</li>
18+
<li style='list-style-type: lower-roman'>OL Item (lower-roman)</li>
19+
</ol>
20+
<ul>
21+
<li>UL Item (default)</li>
22+
<li style='list-style-type: circle'>UL Item (circle)</li>
23+
<li style='list-style-type: square'>UL Item (square)</li>
24+
<li style='list-style-type: disc'>UL Item (disc)</li>
25+
</ul>
26+
</div>
27+
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>
37+
38+
<script type="text/javascript" src="../../libs/html2canvas/dist/html2canvas.js"></script>
39+
40+
<script type="text/javascript">
41+
var pdf = new jsPDF('p', 'pt', 'letter');
42+
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) {
52+
var iframe = document.createElement('iframe');
53+
iframe.setAttribute('style','position:absolute;right:0; top:0; bottom:0; height:100%; width:500px');
54+
document.body.appendChild(iframe);
55+
iframe.src = pdf.output('datauristring');
56+
57+
//var div = document.createElement('pre');
58+
//div.innerText=pdf.output();
59+
//document.body.appendChild(div);
60+
}
61+
});
62+
</script>
63+
</body>
64+
</html>

0 commit comments

Comments
 (0)