Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

jsPDF: new features #6

Merged
merged 4 commits into from
Jan 25, 2012
Merged

jsPDF: new features #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e2831ea
Possible to change font
pablohess Jan 19, 2012
4896947
Possible to change text color
pablohess Jan 20, 2012
aed3044
Possible to add filled rectangles
pablohess Jan 20, 2012
37016fb
Added examples for lines and rectangles
pablohess Jan 20, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
210 changes: 207 additions & 3 deletions examples/basic.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,51 @@ <h2>Different font sizes</h2>
doc.output('datauri');</pre>
<a href="javascript:demo2()">Run Code</a>

<h2>Different font types</h2>
<pre>var doc = new jsPDF();

doc.text(20, 20, 'This is the default font.');

doc.setFont("courier");
doc.text(20, 30, 'This is courier normal.');

doc.setFont("times");
doc.setFontType("italic");
doc.text(20, 40, 'This is times italic.');

doc.setFont("helvetica");
doc.setFontType("bold");
doc.text(20, 50, 'This is helvetica bold.');

doc.setFont("courier");
doc.setFontType("bolditalic");
doc.text(20, 60, 'This is courier bolditalic.');

// Output as Data URI
doc.output('datauri');</pre>
<a href="javascript:demo3()">Run Code</a>

<h2>Different text colors</h2>
<pre>var doc = new jsPDF();

doc.setTextColor(100);
doc.text(20, 20, 'This is gray.');

doc.setTextColor(150);
doc.text(20, 30, 'This is light gray.');

doc.setTextColor(255,0,0);
doc.text(20, 40, 'This is red.');

doc.setTextColor(0,255,0);
doc.text(20, 50, 'This is green.');

doc.setTextColor(0,0,255);
doc.text(20, 60, 'This is blue.');

// Output as Data URI
doc.output('datauri');</pre>
<a href="javascript:demo4()">Run Code</a>

<h2>Adding metadata</h2>
<pre>var doc = new jsPDF();
Expand All @@ -83,7 +128,7 @@ <h2>Adding metadata</h2>

// Output as Data URI
doc.output('datauri');</pre>
<a href="javascript:demo3()">Run Code</a>
<a href="javascript:demo5()">Run Code</a>


<h2>Example of user input</h2>
Expand All @@ -110,9 +155,64 @@ <h2>Example of user input</h2>
doc.text(20, 30 + (i * 10), i + ' x ' + multiplier + ' = ' + (i * multiplier));
}
doc.output('datauri');</pre>
<a href="javascript:demo4()">Run Code</a>
<a href="javascript:demo6()">Run Code</a>

<h2>Draw example: rectangles / squares</h2>
<pre>var doc = new jsPDF();

doc.rect(20, 20, 10, 10); // empty square

doc.rect(40, 20, 10, 10, 'F'); // filled square

doc.setDrawColor(255,0,0);
doc.rect(60, 20, 10, 10); // empty red square

doc.setDrawColor(255,0,0);
doc.rect(80, 20, 10, 10, 'FD'); // filled square with red borders

doc.setDrawColor(0);
doc.setFillColor(255,0,0);
doc.rect(100, 20, 10, 10, 'F'); // filled red square

doc.setDrawColor(0);
doc.setFillColor(255,0,0);
doc.rect(120, 20, 10, 10, 'FD'); // filled red square with black borders

// Output as Data URI
doc.output('datauri');</pre>
<a href="javascript:demo7()">Run Code</a>

<h2>Draw example: lines</h2>
<pre>var doc = new jsPDF();

doc.line(20, 20, 60, 20); // horizontal line

doc.setLineWidth(0.5);
doc.line(20, 25, 60, 25);

doc.setLineWidth(1);
doc.line(20, 30, 60, 30);

doc.setLineWidth(1.5);
doc.line(20, 35, 60, 35);

doc.setDrawColor(255,0,0); // draw red lines

doc.setLineWidth(0.1);
doc.line(100, 20, 100, 60); // vertical line

doc.setLineWidth(0.5);
doc.line(105, 20, 105, 60);

doc.setLineWidth(1);
doc.line(110, 20, 110, 60);

doc.setLineWidth(1.5);
doc.line(115, 20, 115, 60);

// Output as Data URI
doc.output('datauri');</pre>
<a href="javascript:demo8()">Run Code</a>

<script type="text/javascript">

Expand Down Expand Up @@ -141,6 +241,53 @@ <h2>Example of user input</h2>

function demo3() {
var doc = new jsPDF();

doc.text(20, 20, 'This is the default font.');

doc.setFont("courier");
doc.setFontType("normal");
doc.text(20, 30, 'This is courier normal.');

doc.setFont("times");
doc.setFontType("italic");
doc.text(20, 40, 'This is times italic.');

doc.setFont("helvetica");
doc.setFontType("bold");
doc.text(20, 50, 'This is helvetica bold.');

doc.setFont("courier");
doc.setFontType("bolditalic");
doc.text(20, 60, 'This is courier bolditalic.');

// Output as Data URI
doc.output('datauri');
}

function demo4() {
var doc = new jsPDF();

doc.setTextColor(100);
doc.text(20, 20, 'This is gray.');

doc.setTextColor(150);
doc.text(20, 30, 'This is light gray.');

doc.setTextColor(255,0,0);
doc.text(20, 40, 'This is red.');

doc.setTextColor(0,255,0);
doc.text(20, 50, 'This is green.');

doc.setTextColor(0,0,255);
doc.text(20, 60, 'This is blue.');

// Output as Data URI
doc.output('datauri');
}

function demo5() {
var doc = new jsPDF();
doc.text(20, 20, 'This PDF has a title, subject, author, keywords and a creator.');

// Optional - set properties on the document
Expand All @@ -156,7 +303,7 @@ <h2>Example of user input</h2>
doc.output('datauri');
}

function demo4() {
function demo6() {
var name = prompt('What is your name?');
var multiplier = prompt('Enter a number:');
multiplier = parseInt(multiplier);
Expand All @@ -183,6 +330,63 @@ <h2>Example of user input</h2>

}

function demo7() {
var doc = new jsPDF();

doc.rect(20, 20, 10, 10); // empty square

doc.rect(40, 20, 10, 10, 'F'); // filled square

doc.setDrawColor(255,0,0);
doc.rect(60, 20, 10, 10); // empty red square

doc.setDrawColor(255,0,0);
doc.rect(80, 20, 10, 10, 'FD'); // filled square with red borders

doc.setDrawColor(0);
doc.setFillColor(255,0,0);
doc.rect(100, 20, 10, 10, 'F'); // filled red square

doc.setDrawColor(0);
doc.setFillColor(255,0,0);
doc.rect(120, 20, 10, 10, 'FD'); // filled red square with black borders

// Output as Data URI
doc.output('datauri');
}

function demo8() {
var doc = new jsPDF();

doc.line(20, 20, 60, 20); // horizontal line

doc.setLineWidth(0.5);
doc.line(20, 25, 60, 25);

doc.setLineWidth(1);
doc.line(20, 30, 60, 30);

doc.setLineWidth(1.5);
doc.line(20, 35, 60, 35);

doc.setDrawColor(255,0,0); // draw red lines

doc.setLineWidth(0.1);
doc.line(100, 20, 100, 60); // vertical line

doc.setLineWidth(0.5);
doc.line(105, 20, 105, 60);

doc.setLineWidth(1);
doc.line(110, 20, 110, 60);

doc.setLineWidth(1.5);
doc.line(115, 20, 115, 60);

// Output as Data URI
doc.output('datauri');
}

</script>


Expand Down
Loading