Angular Export to PDF using PDFMake (Client-Side PDF Generation)

Generating PDF for reports, forms, invoices, and other data is a common use case for any web application.

Generating PDF at client side can be very helpful. We can format and design pdf as per our requirement without using any external tool.

The following are the two popular open-source javascript libraries available for client-side pdf generation.

PDFMake
jsPDF

In this article, you will see how to export a pdf file in angular 8 using pdfmake.

Find the complete article with an online resume builder demo application at NgDevelop Blog.

Check out the original article 📰 Angular Export to PDF using PDFMake (Client-Side PDF Generation)

GitHub Repository: 📝 https://github.com/ngdevelop-tech/angular-8-export-pdf

Live Application 🚀 : https://online-resume-builder.netlify.com/

Introduction

PDFMake is very popular client-side and server-side pdf generation javascript library. It has 100,000+ weekly downloads from npm. And 7K+ GitHub stars.

It is easy to use and provides all required features for pdf design and formatting with some extraordinary features like QR Code, Table of contents and Helper methods for Opening pdf, download pdf, and pdf printing.

Environment Setup and PDF Generation

Create a Angular Project

Use the below command to create a new Angular project with Angular CLI.
ng new online-resume-builder

Install PDFMake Library

npm install --save pdfmake

Import pdfmake and vfs_fonts

To begin in browser with the default configuration, we should include two files Pdfmake.js and vfs_fonts.js. When you install Pdfmake from npm it comes with the both file.

Now to use this files in angular component or service add below import statement on top of component/service

import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';
pdfMake.vfs = pdfFonts.pdfMake.vfs;

Generate single line text pdf for testing our environment setup

PDFMake follows a declarative approach. It basically means, you’ll never have to calculate positions manually or use commands like writeText(text, x, y), moveDown etc…, as you would with a lot of other libraries. The most fundamental concept to be mastered is the document-definition-object which can be as simple as:

All the pdf formatting and design configuration are written in document-definition-object. As shown below :

export class AppComponent {
 generatePdf(){
  const documentDefinition = { content: 'This is an sample PDF printed with pdfMake' };
  pdfmake.createPdf(documentDefinition).open();
 }
}

<button (click)="generatePdf()">Open PDF</button>

Add Open PDF button on app.component.html and call generatePdf().

Serve your application and test. This will show pdf as below :

PDFMake comes with inbuilt methods :

• Download the PDF : pdfMake.createPdf(docDefinition).download();
• Open the PDF in new window : pdfMake.createPdf(docDefinition).open();
• Open PDF in same window : pdfMake.createPdf(docDefinition).open({}, window);
• Print the PDF: pdfMake.createPdf(docDefinition).print();

PDFMake also provides methods for :

• Put the PDF into your own page as URL data
• Get the PDF as base64 data
• Get the PDF as a buffer
• Get the PDF as Blob

Refer here for more details.

Online Resume Builder using Angular and PDFMake

Read my original article 📰 for a detailed and step-by-step explanation to create an Online resume builder application using Angular and PDFMake.

I hope you like this article. Please provide your valuable comments, feedback, and suggestions.

If you like the project please mark the ⭐ in the Github repository.

Keep Learning, Keep Sharing 🙂