Examples for using jsPDF with Data URIs below. Go back to project homepage.
var doc = new jsPDF(); doc.text(20, 20, 'Hello world!'); doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.'); doc.addPage(); doc.text(20, 20, 'Do you like that?'); doc.save('Test.pdf');Run Code
var doc = new jsPDF('landscape'); doc.text(20, 20, 'Hello landscape world!'); doc.save('Test.pdf');Run Code
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 doc.setProperties({ title: 'Title', subject: 'This is the subject', author: 'James Hall', keywords: 'generated, javascript, web 2.0, ajax', creator: 'MEEE' }); // Output as Data URI doc.save('Test.pdf');Run Code
var name = prompt('What is your name?'); var multiplier = prompt('Enter a number:'); multiplier = parseInt(multiplier); var doc = new jsPDF(); doc.setFontSize(22); doc.text(20, 20, 'Questions'); doc.setFontSize(16); doc.text(20, 30, 'This belongs to: ' + name); for(var i = 1; i <= 12; i ++) { doc.text(20, 30 + (i * 10), i + ' x ' + multiplier + ' = ___'); } doc.addPage(); doc.setFontSize(22); doc.text(20, 20, 'Answers'); doc.setFontSize(16); for(var i = 1; i <= 12; i ++) { doc.text(20, 30 + (i * 10), i + ' x ' + multiplier + ' = ' + (i * multiplier)); } doc.save('Test.pdf');Run Code
var doc = new jsPDF(); doc.setFontSize(22); doc.text(20, 20, 'This is a title'); doc.setFontSize(16); doc.text(20, 30, 'This is some normal sized text underneath.'); doc.save('Test.pdf');Run Code
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.'); doc.save('Test.pdf');Run Code
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.'); doc.save('Test.pdf');Run Code
var pdf = new jsPDF('p','in','letter') , sizes = [12, 16, 20] , fonts = [['Times','Roman'],['Helvetica',''], ['Times','Italic']] , font, size, lines , verticalOffset = 0.5 // inches on a 8.5 x 11 inch sheet. , loremipsum = 'Lorem ipsum dolor sit amet, ...' for (var i in fonts){ if (fonts.hasOwnProperty(i)) { font = fonts[i] size = sizes[i] lines = pdf.setFont(font[0], font[1]) .setFontSize(size) .splitTextToSize(loremipsum, 7.5) // Don't want to preset font, size to calculate the lines? // .splitTextToSize(text, maxsize, options) // allows you to pass an object with any of the following: // { // 'fontSize': 12 // , 'fontStyle': 'Italic' // , 'fontName': 'Times' // } // Without these, .splitTextToSize will use current / default // font Family, Style, Size. pdf.text(0.5, verticalOffset + size / 72, lines) verticalOffset += (lines.length + 0.5) * size / 72 } } pdf.save('Test.pdf');Run Code
var pdf = new jsPDF('p', 'pt', 'letter'); pdf.text( 'This text is normally\raligned.', 140, 50 ); pdf.text( 'This text is centered\raround\rthis point.', 140, 120, 'center' ); pdf.text( 'This text is rotated\rand centered around\rthis point.', 140, 300, 45, 'center' ); pdf.text( 'This text is\raligned to the\rright.', 140, 400, 'right' ); pdf.text( 'This text is\raligned to the\rright.', 140, 550, 45, 'right' ); pdf.text( 'This single line is centered', 460, 50, 'center' ); pdf.text( 'This right aligned text\r\rhas an empty line.', 460, 200, 'right' ); pdf.save('Test.pdf');Run Code
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 doc.setDrawColor(0); doc.setFillColor(255, 255, 255); doc.roundedRect(140, 20, 10, 10, 3, 3, 'FD'); // Black square with rounded corners doc.save('Test.pdf');Run Code
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); doc.save('Test.pdf');Run Code
var doc = new jsPDF(); doc.ellipse(40, 20, 10, 5); doc.setFillColor(0,0,255); doc.ellipse(80, 20, 10, 5, 'F'); doc.setLineWidth(1); doc.setDrawColor(0); doc.setFillColor(255,0,0); doc.circle(120, 20, 5, 'FD'); doc.save('Test.pdf');Run Code
var doc = new jsPDF(); doc.triangle(60, 100, 60, 120, 80, 110, 'FD'); doc.setLineWidth(1); doc.setDrawColor(255,0,0); doc.setFillColor(0,0,255); doc.triangle(100, 100, 110, 100, 120, 130, 'FD'); doc.save('My file.pdf');Run Code
// Because of security restrictions, getImageFromUrl will // not load images from other domains. Chrome has added // security restrictions that prevent it from loading images // when running local files. Run with: chromium --allow-file-access-from-files --allow-file-access // to temporarily get around this issue. var getImageFromUrl = function(url, callback) { var img = new Image(); img.onError = function() { alert('Cannot load image: "'+url+'"'); }; img.onload = function() { callback(img); }; img.src = url; } // Since images are loaded asyncronously, we must wait to create // the pdf until we actually have the image. // If we already had the jpeg image binary data loaded into // a string, we create the pdf without delay. var createPDF = function(imgData) { var doc = new jsPDF(); // This is a modified addImage example which requires jsPDF 1.0+ // You can check the former one at examples/js/basic.js doc.addImage(imgData, 'JPEG', 10, 10, 50, 50, 'monkey'); // Cache the image using the alias 'monkey' doc.addImage('monkey', 70, 10, 100, 120); // use the cached 'monkey' image, JPEG is optional regardless // As you can guess, using the cached image reduces the generated PDF size by 50%! // Rotate Image - new feature as of 2014-09-20 doc.addImage({ imageData : imgData, angle : -20, x : 10, y : 78, w : 45, h : 58 }); // Output as Data URI doc.output('datauri'); } getImageFromUrl('thinking-monkey.jpg', createPDF);Run Code
//https://fonts.google.com/specimen/PT+Sans var PTSans = "AAEAAAAUAQA..."; //shortened. see demoUsingTTFFont in examples/js/basic.js for full base64 encoded ttffile var doc = new jsPDF(); doc.addFileToVFS("PTSans.ttf", PTSans); doc.addFont('PTSans.ttf', 'PTSans', 'normal'); doc.setFont('PTSans'); // set font doc.setFontSize(10); doc.text("А ну чики брики и в дамки!", 10, 10); doc.save('test.pdf');Run Code