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.
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),moveDownetc…, 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 🙂
Top comments (3)
Hi @ankit ,
npmjs.com/package/puppeteer is also a great option. It's really simple to integrate. I have used it earlier. Now in my new project will this a try.
Thanks for sharing this.
Hi Rupesh,
Thanks for your reply.
I have heard a lot about puppeteer. I curious to know, how can we generate PDF using it ?
It's not Angular-related but I found this good enough for using Puppeteer, dev.to/damcosset/generate-a-pdf-fr...
Thanks for your article.