DEV Community

Lucas Pereira de Souza
Lucas Pereira de Souza

Posted on

Generating PDFs with Node.js

logotech

## Creating and Saving PDFs with JavaScript: A Journey with jsPDF and PDFKit

In the world of web development, the ability to generate and manipulate PDF documents directly from the browser or server-side is a valuable skill. Whether it's creating reports, invoices, text documents, or custom layouts, generating PDFs offers a flexible and professional solution. In this article, we'll explore two powerful JavaScript libraries – jsPDF and PDFKit – that simplify this task.

jsPDF: Simple and Direct for the Browser

jsPDF is a popular JavaScript library focused on simplicity and ease of use, especially in the browser environment. It allows you to create PDF documents from scratch or convert existing HTML content.

Installation:

You can include jsPDF in your project in several ways:

  • CDN: The easiest way to get started is using a CDN (Content Delivery Network):

    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js\"></script>
    
  • npm: If you use a package manager like npm, install the library:

    npm install jspdf
    

Example of Use:

Let's create a simple PDF with text using jsPDF:

import { jsPDF } from \"jspdf\";

function criarPDF() {
  const doc = new jsPDF();
  doc.text(\"Hello, World! This is a PDF generated with jsPDF.\", 10, 10);
  doc.save(\"example.pdf\"); // Saves the file in the browser
}

criarPDF();
Enter fullscreen mode Exit fullscreen mode

Explaining the Code:

  1. import { jsPDF } from \"jspdf\";: Imports the jsPDF class from the library.
  2. const doc = new jsPDF();: Creates a new instance of the jsPDF object, which represents the PDF document.
  3. doc.text(\"Hello, World! ...\", 10, 10);: Adds text to the PDF. The numbers 10, 10 represent the (x, y) coordinates where the text will be rendered.
  4. doc.save(\"example.pdf\");: Saves the PDF to the user's device, usually opening the \"Save As" dialog.

Additional jsPDF Resources:

  • Adding Images: doc.addImage() allows you to insert images into the PDF.
  • Text Formatting: Control of fonts, sizes, colors, and alignments.
  • Tables: Creating simple tables.
  • HTML to PDF: Convert HTML elements to PDF using the html() function (requires the inclusion of the html2canvas extension).

PDFKit: Power and Flexibility on the Server

PDFKit is a powerful JavaScript library for generating PDFs, often used on the server-side (Node.js). It offers more control over the layout and formatting of the document compared to jsPDF.

Installation (Node.js):

npm install pdfkit
Enter fullscreen mode Exit fullscreen mode

Example of Use (Node.js):

const PDFDocument = require('pdfkit');
const fs = require('fs');

function criarPDF() {
  const doc = new PDFDocument();

  // Pipe the document to a writable stream (e.g., a file)
  doc.pipe(fs.createWriteStream('example_pdfkit.pdf'));

  doc.fontSize(20)
     .text('Hello, PDFKit!', 100, 100);

  // Finalize PDF
  doc.end();
}

criarPDF();
Enter fullscreen mode Exit fullscreen mode

Explaining the Code:

  1. const PDFDocument = require('pdfkit');: Imports the PDFKit library.
  2. const fs = require('fs');: Imports the fs (file system) module from Node.js to handle files.
  3. doc.pipe(fs.createWriteStream('example_pdfkit.pdf'));: Defines where the PDF will be saved (in this case, in a file called example_pdfkit.pdf).
  4. doc.fontSize(20).text('Hello, PDFKit!', 100, 100);: Adds text with a specific font size.
  5. doc.end();: Finishes the PDF creation.

Additional PDFKit Resources:

  • Advanced Layout: More control over the position of elements, including absolute and relative positioning.
  • Drawing Shapes: Support for drawing lines, rectangles, circles, and other geometric shapes.
  • Adding Images: Support for images with scaling and positioning options.
  • Custom Fonts: Use custom fonts.
  • Streams: The ability to generate PDFs in streams, ideal for handling large documents or streaming to the browser.

Choosing the Right Library

  • jsPDF: Ideal for front-end projects where simplicity and small size are important. Great for generating simple PDFs with text, images, and some basic formatting.
  • PDFKit: More suitable for back-end projects (Node.js) that require more control over layout, formatting, and file handling. Offers more flexibility to create complex documents.

Conclusion

Both jsPDF and PDFKit are valuable tools for generating PDFs in JavaScript. The choice of the ideal library will depend on the requirements of your project and the environment you are working in. With both libraries, you can create dynamic and custom PDF documents, opening up a range of possibilities for your web applications. Explore the documentation of each library to discover all its features and unleash its full potential in creating PDF documents!

Top comments (0)