Skip to content

Commit e07f98f

Browse files
MrRioMrRio
committed
Download PDF button
1 parent 041dcdd commit e07f98f

6 files changed

Lines changed: 83 additions & 31 deletions

File tree

‎examples/css/editor.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,4 +37,8 @@ footer {
3737
.source {
3838
font-family: "source-code-pro", Courier;
3939
font-size: 14px;
40+
}
41+
42+
.controls .alert {
43+
float: left;
4044
}

‎examples/js/editor.js‎

Lines changed: 43 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@ var jsPDFEditor = function() {
77
var editor;
88

99
var demos = {
10+
'images.js': 'Images',
11+
'font-faces.js': 'Font faces',
1012
'from-html.js': 'HTML Renderer (Early stages)',
1113
'two-page.js': 'Two page Hello World',
1214
'circles.js': 'Circles',
13-
'font-faces.js': 'Font faces',
1415
'font-size.js': 'Font sizes',
15-
'images.js': 'Images',
1616
//'kitchen-sink.js': 'Kitchen Sink', // @TODO
1717
'landscape.js': 'Landscape',
1818
'lines.js': 'Lines',
@@ -32,7 +32,8 @@ var jsPDFEditor = function() {
3232
var timeout = setTimeout(function(){ }, 0);
3333

3434
editor.getSession().on('change', function() {
35-
if ($('#auto-refresh').is(':checked')) {
35+
// Hacky workaround to disable auto refresh on user input
36+
if ($('#auto-refresh').is(':checked') && $('#template').val() != 'user-input.js') {
3637
clearTimeout(timeout);
3738
timeout = setTimeout(function() {
3839
jsPDFEditor.update();
@@ -53,11 +54,42 @@ var jsPDFEditor = function() {
5354
};
5455

5556
var loadSelectedFile = function() {
57+
if ($('#template').val() == 'user-input.js') {
58+
$('.controls .checkbox').hide();
59+
$('.controls .alert').show();
60+
} else {
61+
$('.controls .checkbox').show();
62+
$('.controls .alert').hide();
63+
}
5664
$.get('examples/js/' + $('#template').val(), function(response) {
57-
editor.setValue(response)
65+
editor.setValue(response);
66+
editor.gotoLine(0);
5867
});
5968
};
6069

70+
var initAutoRefresh = function() {
71+
$('#auto-refresh').on('change', function() {
72+
if ($('#auto-refresh').is(':checked')) {
73+
$('.run-code').hide();
74+
} else {
75+
$('.run-code').show();
76+
}
77+
});
78+
79+
$('.run-code').click(function() {
80+
jsPDFEditor.update();
81+
return false;
82+
});
83+
};
84+
85+
var initDownloadPDF = function() {
86+
$('.download-pdf').click(function(){
87+
eval(editor.getValue());
88+
doc.save(demos[$('#template').val()] + '.pdf');
89+
});
90+
return false;
91+
}
92+
6193
return {
6294
/**
6395
* Start the editor demo
@@ -73,14 +105,19 @@ var jsPDFEditor = function() {
73105
// Do the first update on init
74106
jsPDFEditor.update();
75107

108+
initAutoRefresh();
109+
110+
initDownloadPDF();
76111
},
77112
/**
78113
* Updates the preview iframe
79114
* @return {void}
80115
*/
81-
update: function() {
116+
update: function(skipEval) {
82117
setTimeout(function() {
83-
eval(editor.getValue());
118+
if (! skipEval) {
119+
eval(editor.getValue());
120+
}
84121
var string = doc.output('datauristring');
85122

86123
$('.preview-pane').attr('src', string);

‎examples/js/rectangles.js‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,30 @@
11
var doc = new jsPDF();
22

3-
doc.rect(20, 20, 10, 10); // empty square
3+
// Empty square
4+
doc.rect(20, 20, 10, 10);
45

5-
doc.rect(40, 20, 10, 10, 'F'); // filled square
6+
// Filled square
7+
doc.rect(40, 20, 10, 10, 'F');
68

9+
// Empty red square
710
doc.setDrawColor(255,0,0);
8-
doc.rect(60, 20, 10, 10); // empty red square
11+
doc.rect(60, 20, 10, 10);
912

13+
// Filled square with red borders
1014
doc.setDrawColor(255,0,0);
11-
doc.rect(80, 20, 10, 10, 'FD'); // filled square with red borders
15+
doc.rect(80, 20, 10, 10, 'FD');
1216

17+
// Filled red square
1318
doc.setDrawColor(0);
1419
doc.setFillColor(255,0,0);
15-
doc.rect(100, 20, 10, 10, 'F'); // filled red square
20+
doc.rect(100, 20, 10, 10, 'F');
1621

22+
// Filled red square with black borders
1723
doc.setDrawColor(0);
1824
doc.setFillColor(255,0,0);
19-
doc.rect(120, 20, 10, 10, 'FD'); // filled red square with black borders
25+
doc.rect(120, 20, 10, 10, 'FD');
2026

27+
// Black sqaure with rounded corners
2128
doc.setDrawColor(0);
2229
doc.setFillColor(255, 255, 255);
23-
doc.roundedRect(140, 20, 10, 10, 3, 3, 'FD'); // Black sqaure with rounded corners
30+
doc.roundedRect(140, 20, 10, 10, 3, 3, 'FD');

‎examples/js/string-splitting.js‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
var pdf = new jsPDF('p','in','letter')
1+
// @TODO: Need to simplify this demo
2+
3+
var doc = new jsPDF('p','in','letter')
24
, sizes = [12, 16, 20]
35
, fonts = [['Times','Roman'],['Helvetica',''], ['Times','Italic']]
46
, font, size, lines
@@ -7,7 +9,7 @@ var pdf = new jsPDF('p','in','letter')
79
, loremipsum = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id eros turpis. Vivamus tempor urna vitae sapien mollis molestie. Vestibulum in lectus non enim bibendum laoreet at at libero. Etiam malesuada erat sed sem blandit in varius orci porttitor. Sed at sapien urna. Fusce augue ipsum, molestie et adipiscing at, varius quis enim. Morbi sed magna est, vel vestibulum urna. Sed tempor ipsum vel mi pretium at elementum urna tempor. Nulla faucibus consectetur felis, elementum venenatis mi mollis gravida. Aliquam mi ante, accumsan eu tempus vitae, viverra quis justo.\n\nProin feugiat augue in augue rhoncus eu cursus tellus laoreet. Pellentesque eu sapien at diam porttitor venenatis nec vitae velit. Donec ultrices volutpat lectus eget vehicula. Nam eu erat mi, in pulvinar eros. Mauris viverra porta orci, et vehicula lectus sagittis id. Nullam at magna vitae nunc fringilla posuere. Duis volutpat malesuada ornare. Nulla in eros metus. Vivamus a posuere libero.'
810

911
// Margins:
10-
pdf.setDrawColor(0, 255, 0)
12+
doc.setDrawColor(0, 255, 0)
1113
.setLineWidth(1/72)
1214
.line(margin, margin, margin, 11 - margin)
1315
.line(8.5 - margin, margin, 8.5-margin, 11-margin)
@@ -18,7 +20,7 @@ for (var i in fonts){
1820
font = fonts[i]
1921
size = sizes[i]
2022

21-
lines = pdf.setFont(font[0], font[1])
23+
lines = doc.setFont(font[0], font[1])
2224
.setFontSize(size)
2325
.splitTextToSize(loremipsum, 7.5)
2426
// Don't want to preset font, size to calculate the lines?
@@ -31,8 +33,7 @@ for (var i in fonts){
3133
// }
3234
// Without these, .splitTextToSize will use current / default
3335
// font Family, Style, Size.
34-
console.log(lines);
35-
pdf.text(0.5, verticalOffset + size / 72, lines)
36+
doc.text(0.5, verticalOffset + size / 72, lines)
3637

3738
verticalOffset += (lines.length + 0.5) * size / 72
3839
}

‎examples/js/user-input.js‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
1-
// Turn off auto-refresh
2-
$('#auto-refresh').attr('checked', null);
3-
41
var name = prompt('What is your name?');
5-
var multiplier = prompt('Enter a number:');
6-
multiplier = parseInt(multiplier);
2+
var multiplier = parseInt(prompt('Enter a number:'));
73

84
var doc = new jsPDF();
95
doc.setFontSize(22);
@@ -20,11 +16,10 @@ doc.setFontSize(22);
2016
doc.text(20, 20, 'Answers');
2117
doc.setFontSize(16);
2218

23-
24-
2519
for(var i = 1; i <= 12; i ++) {
2620
doc.text(20, 30 + (i * 10), i + ' x ' + multiplier + ' = ' + (i * multiplier));
27-
}
21+
}
2822

29-
// Turn on auto-refresh
30-
$('#auto-refresh').attr('checked', 'checked');
23+
// You wouldn't normally call this - this is just to make the
24+
// demo not look broken as we've disabled auto update.
25+
jsPDFEditor.update(true);

‎index.html‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,10 +47,13 @@ <h4>HTML5 JavaScript PDF generation library from <a href="http://twitter.com/MrR
4747

4848
<h2>Have a play.</h2>
4949

50-
<p>A HTML5 client-side solution for generating PDFs. Perfect for tickets, reports, certificates, you name it! </p>
50+
<p>A HTML5 client-side solution for generating PDFs. Perfect for event tickets, reports, certificates, you name it! </p>
51+
52+
<p>No servers were used or harmed in this demo.</p>
53+
5154
<label for="template">Choose example</label>
5255
<select id="template" name="template">
53-
<option>hello-world.js</option>
56+
<option>Hold your horses...</option>
5457
</select>
5558
</div>
5659

@@ -59,12 +62,17 @@ <h2>Have a play.</h2>
5962
<div class="controls">
6063
<div class="pull-right">
6164
<a href="#" class="btn btn-primary">Download Your Code</a>
62-
<a href="#" class="btn btn-success">Run Code</a>
65+
<a href="#" class="btn btn-primary download-pdf">Download PDF</a>
6366
</div>
6467

6568
<label class="checkbox">
6669
<input type="checkbox" id="auto-refresh" checked="checked"> Auto refresh on changes?
6770
</label>
71+
<a href="#" class="run-code hide btn btn-success">Run Code</a>
72+
73+
<div class="alert hide">
74+
Auto refresh is turned off for this example
75+
</div>
6876

6977
</div>
7078

0 commit comments

Comments
 (0)