# jsPDF Demos

Examples for using jsPDF with Data URIs below. Go back to project homepage.

- Basic elements
- Text elements
- Graphic elements
- Using Fonts

## Simple two-page text document

    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

## Landscape document

    var doc = new jsPDF('landscape');
    doc.text(20, 20, 'Hello landscape world!');

    doc.save('Test.pdf');

Run Code

## Adding metadata

    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

## Example of user input

    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

## Different font sizes

    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

## Different font types

    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

## Different text colors

    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

## Font-metrics-based line sizing and split

    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

## Text alignment

    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

## Draw example: rectangles / squares

    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

## Draw example: lines

    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

## Draw example: circles and ellipses

    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

## Draw example: triangles

    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

## Draw example: Images

    // 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

## Using a base64-encoded TTF

        //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