1. Products
  2.   PDF
  3.   JavaScript
  4.   JSPDF
 
  

Generate PDF via Open Source JavaScript API

Open Source JavaScript Library for Creating, Editing & Converting PDF Files, add Graphics & Text to PDF via JavaScript.

What is JSPDF?

JSPDF is an open source HTML5 client side solution for PDF document creation and management. It supports great features like reporting, certificates, ticketing and much more. As PDF is very popular across the web and almost every company is using it to share documents and reports. By using just a couple of commands you can access and reuse all the great features inside your own application. 

The great think about JsPDF library is that it generates a PDF file when users click on the download button. It has included support for several prominent features, such as generating PDF documents, drawing shapes and inserting images to PDF files, add pages to PDF, adding & displaying text, exporting map as PDF, convert HTML to PDF and many more.

Previous Next

Getting Started with JsPDF

The recommend and easiest way to get started is to drop the CDN hosted library into your page, below is the command.

use Installation code

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>

Generating PDF Documents via JavaScript Library

JsPDF offers the functionality for PDF documents generation as well as modifications inside JavaScript applications. You can easily generate PDF documents and add new page to it. You can define document orientation, units, and the default page format while creating the new document. Once the PDF is generated you can easily add new pages, insert images, etc. to it with ease.

How to Create PDF Documents via JavaScript Library?

 import { jsPDF } from "jspdf";

  // Default export is a4 paper, portrait, using millimeters for units
  const doc = new jsPDF();

  doc.text("Hello world!", 10, 10);
  doc.save("a4.pdf");

Inserting Text to PDF Documents via JavaScript

The JsPDF API facilitates JavaScript developers to add and display text inside a PDF document. To draw the text you need to define the font name. We can choose from the available fonts. It is also possible to change the font family and font style. After that, we can define font size, text color and more.

How to Add Text to Existing PDF using JavaScript API?

  //Add Text to Existing PDF 
  var doc = new jsPDF();

  doc.addHTML(document.body, function() {
  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?');
  printData();
  });

  printData = function() {
  var str = doc.output('datauristring');
  console.log(str);
  // window.open(str); Optional
  }

Adding Graphics to PDF Documents via JavaScript

The JsPDF library enables JavaScript professional to draw graphics inside PDF documents. Graphics always add more value to the piece of content. First, we have to set the drawn shapes fill and stroke colors. We can also set the stroke width. Every shape drawing function takes the center point coordinates as two first parameters (except triangle). They also take the last parameter drawing style.  We can draw an ellipse, by passing two radiuses or circle, by passing only one radius, a triangle, by passing each corner’s coordinates and more.

How to Add Image to PDF using JavaScript?

  // Add image to PDF
  var img = new Image()
  img.src = 'assets/sample.png'
  pdf.addImage(img, 'png', 10, 78, 12, 15)
 English