examples/basic.html

<!doctype>
<html>

<head>
  <title>jsPDF</title>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.8.17.custom.css">
  <link rel="stylesheet" type="text/css" href="css/main.css">

  <script type="text/javascript" src="js/jquery/jquery-1.7.1.min.js"></script>
  <script type="text/javascript" src="js/jquery/jquery-ui-1.8.17.custom.min.js"></script>
  <script type="text/javascript" src="../dist/jspdf.umd.js"></script>
  <script type="text/javascript" src="js/basic.js"></script>

  <script>
    window.jsPDF = window.jspdf.jsPDF;
    
    $(function () {
      $("#accordion-basic, #accordion-text, #accordion-graphic, #accordion-font").accordion({
        autoHeight: false,
        navigation: true
      });
      $("#tabs").tabs();
      $(".button").button();
    });
  </script>
</head>

<body>

  <a href="https://github.com/MrRio/jsPDF">
    <img style="position: absolute; top: 0; right: 0; border: 0;"
      src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" />
  </a>

  <h1>jsPDF Demos</h1>

  <p>Examples for using jsPDF with Data URIs below. Go <a href="https://github.com/MrRio/jsPDF">back to project
      homepage</a>.</p>

  <div id="tabs">
    <ul>
      <li><a href="#tabs-basic">Basic elements</a></li>
      <li><a href="#tabs-text">Text elements</a></li>
      <li><a href="#tabs-graphic">Graphic elements</a></li>
      <li><a href="#tabs-font">Using Fonts</a></li>
    </ul>

    <div id="tabs-basic">
      <div id="accordion-basic">
        <h2><a href="#">Simple two-page text document</a></h2>
        <div>
          <p>
            <pre>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');</pre>
            <a href="javascript:demoTwoPageDocument()" class="button">Run Code</a></p>
        </div>

        <h2><a href="#">Landscape document</a></h2>
        <div>
          <p>
            <pre>var doc = new jsPDF('landscape');
doc.text(20, 20, 'Hello landscape world!');

doc.save('Test.pdf');</pre>
            <a href="javascript:demoLandscape()" class="button">Run Code</a></p>
        </div>

        <h2><a href="#">Adding metadata</a></h2>
        <div>
          <p>
            <pre>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');</pre>
            <a href="javascript:demoMetadata()" class="button">Run Code</a></p>
        </div>

        <h2><a href="#">Example of user input</a></h2>
        <div>
          <p>
            <pre>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');</pre>
            <a href="javascript:demoUserInput()" class="button">Run Code</a></p>
        </div>
      </div>
    </div>

    <div id="tabs-text">
      <div id="accordion-text">
        <h2><a href="#">Different font sizes</a></h2>
        <div>
          <p>
            <pre>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');</pre>
            <a href="javascript:demoFontSizes()" class="button">Run Code</a>
          </p>
        </div>

        <h2><a href="#">Different font types</a></h2>
        <div>
          <p>
            <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.');

doc.save('Test.pdf');</pre>
            <a href="javascript:demoFontTypes()" class="button">Run Code</a></p>
        </div>

        <h2><a href="#">Different text colors</a></h2>
        <div>
          <p>
            <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.');

doc.save('Test.pdf');</pre>
            <a href="javascript:demoTextColors()" class="button">Run Code</a></p>
        </div>

        <h2><a href="#">Font-metrics-based line sizing and split</a></h2>
        <div>
          <p>
            <pre>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');</pre>
            <a href="javascript:demoStringSplitting()" class="button">Run Code</a></p>
        </div>

        <h2><a href="#">Text alignment</a></h2>
        <div>
          <p>
            <pre>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');</pre>
            <a href="javascript:demoTextAlign()" class="button">Run Code</a></p>
        </div>

      </div>
    </div>

    <div id="tabs-graphic">
      <div id="accordion-graphic">
        <h2><a href="#">Draw example: rectangles / squares</a></h2>
        <div>
          <p>
            <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

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');</pre>
            <a href="javascript:demoRectangles()" class="button">Run Code</a></p>
        </div>

        <h2><a href="#">Draw example: lines</a></h2>
        <div>
          <p>
            <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);

doc.save('Test.pdf');</pre>
            <a href="javascript:demoLines()" class="button">Run Code</a></p>
        </div>

        <h2><a href="#">Draw example: circles and ellipses</a></h2>
        <div>
          <p>
            <pre>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');</pre>
            <a href="javascript:demoCircles()" class="button">Run Code</a></p>
        </div>

        <h2><a href="#">Draw example: triangles</a></h2>
        <div>
          <p>
            <pre>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');</pre>
            <a href="javascript:demoTriangles()" class="button">Run Code</a></p>
        </div>

        <h2><a href="#">Draw example: Images</a></h2>
        <div>
          <p>
            <pre>// 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 <em>examples/js/basic.js</em>

    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);
</pre>
            <!--a href="javascript:demoImages()" class="button">Run Code</a-->
            <!-- I'm lazy, so using eval() directly, sorry ;) [diegocr] -->
            <a href="javascript:void(0);" onclick="eval($(this).prev().text())" class="button">Run Code</a>
          </p>
        </div>
      </div>
    </div>

    <div id="tabs-font">
      <div id="accordion-font">
        <h2><a href="#">Using a base64-encoded TTF</a></h2>
        <div>
          <p>

            <pre>
    //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');</pre>
            <a href="javascript:demoUsingTTFFont()" class="button">Run Code</a></p>
        </div>

      </div>
    </div>
  </div>
  </div>

</body>

</html>