Skip to content

Commit e97ac1b

Browse files
MrRioMrRio
committed
Add demo files
1 parent d848d43 commit e97ac1b

18 files changed

Lines changed: 521 additions & 15 deletions

‎examples/css/editor.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ footer {
1313
float: left;
1414
clear: left;
1515
position: relative;
16+
font-family: "source-code-pro";
17+
font-size: 16px;
1618
}
1719

1820
.controls {

‎examples/js/circles.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
var doc = new jsPDF();
2+
3+
doc.ellipse(40, 20, 10, 5);
4+
5+
doc.setFillColor(0,0,255);
6+
doc.ellipse(80, 20, 10, 5, 'F');
7+
8+
doc.setLineWidth(1);
9+
doc.setDrawColor(0);
10+
doc.setFillColor(255,0,0);
11+
doc.circle(120, 20, 5, 'FD');

‎examples/js/editor.js‎

Lines changed: 46 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,37 +6,68 @@ var jsPDFEditor = function() {
66

77
var editor;
88

9-
return {
10-
init: function() {
9+
var demos = {
10+
'circles.js': 'Cicle',
11+
'font-faces.js': 'Font faces',
12+
'font-size.js': 'Font sizes',
13+
'from-html.js': 'From HTML Plugin',
14+
'images.js': 'Images',
15+
//'kitchen-sink.js': 'Kitchen Sink', // @TODO
16+
'landscape.js': 'Landscape',
17+
'lines.js': 'Lines',
18+
'rectangles.js': 'Rectangles',
19+
'string-splitting.js': 'String Splitting',
20+
'text-colors.js': 'Text colors',
21+
'triangles.js': 'Triangles',
22+
'two-page.js': 'Two page',
23+
'user-input.js': 'User input'
24+
};
1125

12-
var timeout = setTimeout(function(){ }, 0);
26+
var aceEditor = function() {
27+
editor = ace.edit("editor");
28+
editor.setTheme("ace/theme/twilight");
29+
//editor.setTheme("ace/theme/ambiance");
30+
editor.getSession().setMode("ace/mode/javascript");
31+
32+
var timeout = setTimeout(function(){ }, 0);
1333

14-
editor = ace.edit("editor");
34+
editor.getSession().on('change', function() {
35+
if ($('#auto-refresh').is(':checked')) {
36+
clearTimeout(timeout);
37+
timeout = setTimeout(function() {
38+
jsPDFEditor.update();
1539

16-
editor.setTheme("ace/theme/monokai");
17-
editor.getSession().setMode("ace/mode/javascript");
40+
}, 200);
41+
}
1842

19-
editor.getSession().on('change', function() {
20-
if ($('#auto-refresh').is(':checked')) {
21-
clearTimeout(timeout);
22-
timeout = setTimeout(function() {
23-
jsPDFEditor.update();
43+
});
44+
}
2445

25-
}, 200);
26-
}
46+
return {
47+
/**
48+
* Start the editor demo
49+
* @return {void}
50+
*/
51+
init: function() {
2752

28-
});
53+
// Init the ACE editor
54+
aceEditor();
2955

56+
// Do the first update on init
57+
jsPDFEditor.update();
3058

3159
},
60+
/**
61+
* Updates the preview iframe
62+
* @return {void}
63+
*/
3264
update: function() {
3365
setTimeout(function() {
3466
eval(editor.getValue());
3567
var string = doc.output('datauristring');
3668

3769
$('iframe').attr('src', string);
3870
}, 0);
39-
4071
}
4172
};
4273

‎examples/js/font-faces.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
var doc = new jsPDF();
2+
3+
doc.text(20, 20, 'This is the default font.');
4+
5+
doc.setFont("courier");
6+
doc.setFontType("normal");
7+
doc.text(20, 30, 'This is courier normal.');
8+
9+
doc.setFont("times");
10+
doc.setFontType("italic");
11+
doc.text(20, 40, 'This is times italic.');
12+
13+
doc.setFont("helvetica");
14+
doc.setFontType("bold");
15+
doc.text(20, 50, 'This is helvetica bold.');
16+
17+
doc.setFont("courier");
18+
doc.setFontType("bolditalic");
19+
doc.text(20, 60, 'This is courier bolditalic.');

‎examples/js/font-size.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
var doc = new jsPDF();
2+
doc.setFontSize(22);
3+
doc.text(20, 20, 'This is a title');
4+
5+
doc.setFontSize(16);
6+
doc.text(20, 30, 'This is some normal sized text underneath.');

‎examples/js/from-html.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
var pdf = new jsPDF('p','in','letter')
2+
3+
// source can be HTML-formatted string, or a reference
4+
// to an actual DOM element from which the text will be scraped.
5+
, source = $('#fromHTMLtestdiv')[0]
6+
7+
// we support special element handlers. Register them with jQuery-style
8+
// ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
9+
// There is no support for any other type of selectors
10+
// (class, of compound) at this time.
11+
, specialElementHandlers = {
12+
// element with id of "bypass" - jQuery style selector
13+
'#bypassme': function(element, renderer){
14+
// true = "handled elsewhere, bypass text extraction"
15+
return true
16+
}
17+
};
18+
19+
// all coords and widths are in jsPDF instance's declared units
20+
// 'inches' in this case
21+
pdf.fromHTML(
22+
source // HTML string or DOM elem ref.
23+
, 0.5 // x coord
24+
, 0.5 // y coord
25+
, {
26+
'width':7.5 // max width of content on PDF
27+
, 'elementHandlers': specialElementHandlers
28+
}
29+
);

‎examples/js/images.js‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
// Because of security restrictions, getImageFromUrl will
2+
// not load images from other domains. Chrome has added
3+
// security restrictions that prevent it from loading images
4+
// when running local files. Run with: chromium --allow-file-access-from-files --allow-file-access
5+
// to temporarily get around this issue.
6+
var getImageFromUrl = function(url, callback) {
7+
var img = new Image, data, ret={data: null, pending: true};
8+
9+
img.onError = function() {
10+
throw new Error('Cannot load image: "'+url+'"');
11+
}
12+
img.onload = function() {
13+
var canvas = document.createElement('canvas');
14+
document.body.appendChild(canvas);
15+
canvas.width = img.width;
16+
canvas.height = img.height;
17+
18+
var ctx = canvas.getContext('2d');
19+
ctx.drawImage(img, 0, 0);
20+
// Grab the image as a jpeg encoded in base64, but only the data
21+
data = canvas.toDataURL('image/jpeg').slice('data:image/jpeg;base64,'.length);
22+
// Convert the data to binary form
23+
data = atob(data)
24+
document.body.removeChild(canvas);
25+
26+
ret['data'] = data;
27+
ret['pending'] = false;
28+
if (typeof callback === 'function') {
29+
callback(data);
30+
}
31+
}
32+
img.src = url;
33+
34+
return ret;
35+
}
36+
37+
// Since images are loaded asyncronously, we must wait to create
38+
// the pdf until we actually have the image data.
39+
// If we already had the jpeg image binary data loaded into
40+
// a string, we create the pdf without delay.
41+
var createPDF = function(imgData) {
42+
var doc = new jsPDF();
43+
44+
doc.addImage(imgData, 'JPEG', 10, 10, 50, 50);
45+
doc.addImage(imgData, 'JPEG', 70, 10, 100, 120);
46+
47+
doc.save('output.pdf');
48+
49+
}
50+
51+
getImageFromUrl('thinking-monkey.jpg', createPDF);

‎examples/js/kitchen-sink.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
2+
// Kitchen Sink Example
3+

‎examples/js/landscape.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
var doc = new jsPDF('landscape');
2+
doc.text(20, 20, 'Hello landscape world!');

‎examples/js/lines.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
var doc = new jsPDF();
2+
3+
doc.line(20, 20, 60, 20); // horizontal line
4+
5+
doc.setLineWidth(0.5);
6+
doc.line(20, 25, 60, 25);
7+
8+
doc.setLineWidth(1);
9+
doc.line(20, 30, 60, 30);
10+
11+
doc.setLineWidth(1.5);
12+
doc.line(20, 35, 60, 35);
13+
14+
doc.setDrawColor(255,0,0); // draw red lines
15+
16+
doc.setLineWidth(0.1);
17+
doc.line(100, 20, 100, 60); // vertical line
18+
19+
doc.setLineWidth(0.5);
20+
doc.line(105, 20, 105, 60);
21+
22+
doc.setLineWidth(1);
23+
doc.line(110, 20, 110, 60);
24+
25+
doc.setLineWidth(1.5);
26+
doc.line(115, 20, 115, 60);

0 commit comments

Comments
 (0)