Skip to main content

Angular Export to PDF using PDFMake

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


Angular Export to PDF using PDFMake

Generating PDF for reports, forms, invoices, and other data is a common use case for any web application. In a web application, We can generate pdf using various approaches:

  1. Using browser print function: It is an easy option when you want to print a complete web page as a pdf. You can also customize pdf up to some limits. limitation of this approach is we don’t have strong control on format and design of pdf.
  2. Generating PDF using Backend application or third-party reporting tools and download it on client-side: You have more control over pdf formatting and design and you can process large amounts of data. Though this type of pdf generation approach required a separate API call for generating the pdf.

We can solve the limitations of both ways by generating pdf at client side. We can format and design pdf as per our requirement without calling separate API.

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

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

Further, Read Below PDFMake Articles

Angular 8 Export to PDF using PDFMake

We will cover the following topics in this tutorial

So let’s start with PDFMake introduction,

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. 

We will create an Online resume builder application in angular 8 and PDFMake. Here we will get the personal details, educational details and experience details and generate pdf at client side. We will provide different options for print pdf and download pdf.

I have published this application on netlify you can check it here https://online-resume-builder.netlify.com/

Environment Setup

Create a Angular Project

Use 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 : 

Initial PDF generated using PDFMake

If you can see above pdf on click of Open PDF button then environment setup is done. Now we can start with our resume builder application

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.

Same as PDF, You can generate excel at client side. Refer Export to Excel in Angular blog for client-side excel generation in Angular.

Online Resume Builder using Angular and PDFMake

Now for an online resume builder, I have designed a resume form to get personal details, skills, experience details, education details, and other details. As shown below :

Online Resume Builder Form Design | Client side pdf generation using Angular and PDFMake

Here I have used the template-driven form and 

Comments

Post a Comment

Popular posts from this blog

How to use Ngx-Charts in Angular ?

Charts helps us to visualize large amount of data in an easy to understand and interactive way. This helps businesses to grow more by taking important decisions from the data. For example, e-commerce can have charts or reports for product sales, with various categories like product type, year, etc. In angular, we have various charting libraries to create charts.  Ngx-charts  is one of them. Check out the list of  best angular chart libraries .  In this article, we will see data visualization with ngx-charts and how to use ngx-charts in angular application ? We will see, How to install ngx-charts in angular ? Create a vertical bar chart Create a pie chart, advanced pie chart and pie chart grid Introduction ngx-charts  is an open-source and declarative charting framework for angular2+. It is maintained by  Swimlane . It is using Angular to render and animate the SVG elements with all of its binding and speed goodness and uses d3 for the excellent math functio...
Post a Comment
Read more

Understand Angular’s forRoot and forChild

  forRoot   /   forChild   is a pattern for singleton services that most of us know from routing. Routing is actually the main use case for it and as it is not commonly used outside of it, I wouldn’t be surprised if most Angular developers haven’t given it a second thought. However, as the official Angular documentation puts it: “Understanding how  forRoot()  works to make sure a service is a singleton will inform your development at a deeper level.” So let’s go. Providers & Injectors Angular comes with a dependency injection (DI) mechanism. When a component depends on a service, you don’t manually create an instance of the service. You  inject  the service and the dependency injection system takes care of providing an instance. import { Component, OnInit } from '@angular/core'; import { TestService } from 'src/app/services/test.service'; @Component({ selector: 'app-test', templateUrl: './test.component.html', styleUrls: ['./test.compon...
Post a Comment
Read more

How to solve Puppeteer TimeoutError: Navigation timeout of 30000 ms exceeded

During the automation of multiple tasks on my job and personal projects, i decided to move on  Puppeteer  instead of the old school PhantomJS. One of the most usual problems with pages that contain a lot of content, because of the ads, images etc. is the load time, an exception is thrown (specifically the TimeoutError) after a page takes more than 30000ms (30 seconds) to load totally. To solve this problem, you will have 2 options, either to increase this timeout in the configuration or remove it at all. Personally, i prefer to remove the limit as i know that the pages that i work with will end up loading someday. In this article, i'll explain you briefly 2 ways to bypass this limitation. A. Globally on the tab The option that i prefer, as i browse multiple pages in the same tab, is to remove the timeout limit on the tab that i use to browse. For example, to remove the limit you should add: await page . setDefaultNavigationTimeout ( 0 ) ;  COPY SNIPPET The setDefaultNav...
Post a Comment
Read more