Angular Export to PDF using PDFMake (Client-Side PDF Generation)
Tags: angular, pdfmake, javascript, webdev
Published: 2019-10-06 18:27:32

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](http://pdfmake.org/#/)
[jsPDF](https://www.npmjs.com/package/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](https://www.ngdevelop.tech/blog/).**

Check out the original article 📰 [Angular Export to PDF using PDFMake (Client-Side PDF Generation)](https://www.ngdevelop.tech/angular-8-export-to-pdf-using-pdfmake/)

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

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

![Angular export to PDF using PDFMake | Online Resume Builder](https://www.ngdevelop.tech/wp-content/uploads/2019/08/angular-export-to-pdf-pdfmake.gif "Online Resume Builder using Angular and PDFMake")


##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

```javascript
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 :

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

```html
<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 : 

![PDF Generated using PDFMake](https://lh3.googleusercontent.com/_6wDbymP5twhdkpeNnWRbpNzuL2R37LhqUwBqY512lUXS89VmUNME1a0jCpZErEhbInXgHsb-qJH_hQr5IhcvReToGNw4W_YUQDWRg-sMqF5_mbyvK2w2AfiHnC3z28uaj0m7KoR "PDF Generated using PDFMake")

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](https://pdfmake.github.io/docs/getting-started/client-side/methods/) for more details.

##Online Resume Builder using Angular and PDFMake

Read my [original article](https://www.ngdevelop.tech/angular-8-export-to-pdf-using-pdfmake/) 📰 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](https://github.com/ngdevelop-tech/angular-8-export-pdf).

Keep Learning, Keep Sharing 🙂