How To Export Data As PDF in Angular?
Last Updated :
04 Oct, 2024
Exporting data in Angular to PDF is a common requirement for applications that handle reports, invoices or downloadable content, in this article, we'll explain how to manually export data from an Angular application to PDF using jsPDF, a popular JavaScript library for creating PDF documents.
Prerequisites
Steps To Export Data As PDF in Angular
Step 1: Install Angular CLI
If you do not have Angular CLI installed globally then run the following command in PowerShell or your command line:
npm install -g @angular/cli
This installs Angular CLI globally making ng command available system-wide.
Step 2: Verify the Installation
When the installation is complete Verify that Angular CLI is installed correctly by running this:
ng --version
If Angular CLI is installed correctly, you should view the Angular CLI version details and associated dependencies.
Step 3: Setting Up a New Angular Project
ng new angular-pdf-export-gfg
cd angular-pdf-export-gfg
It will create a basic angular project.
Step 4: Installing Required npm Packages
- jsPDF: It is a popular library for creating PDF files
- html2canvas: It captures content of an HTML element and render it to the canvas which can be converted to PDF.
npm install jspdf html2canvas --save
Project Structure
Folder StructureDependencies
"dependencies": {
"@angular/animations": "^18.2.0",
"@angular/common": "^18.2.0",
"@angular/compiler": "^18.2.0",
"@angular/core": "^18.2.0",
"@angular/forms": "^18.2.0",
"@angular/platform-browser": "^18.2.0",
"@angular/platform-browser-dynamic": "^18.2.0",
"@angular/router": "^18.2.0",
"html2canvas": "^1.4.1",
"jspdf": "^2.5.2",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.10"
}
Step 5: Implementing the PDF Export Functionality
5.1. Modify the app.component.html
It will add a simple HTML template with button to trigger PDF creation and a section with content that we will export as PDF.
HTML
<!-- app.component.html -->
<div class="container">
<h1>GeeksforGeeks</h1>
<h3>Angular PDF Export Example</h3>
<div id="content">
<p>This content will be exported to PDF!</p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pankaj Bind</td>
<td>20</td>
<td>Surat</td>
</tr>
<tr>
<td>Neeraj Bind</td>
<td>18</td>
<td>Prayagraj</td>
</tr>
</tbody>
</table>
</div>
<button (click)="exportPDF()">Export as PDF</button>
</div>
5.2. Modify the app.component.ts
In the component’s TypeScript file, we'll import the jsPDF and html2canvas libraries and write the logic for generating the PDF.
JavaScript
//app.component.ts
import { Component } from '@angular/core';
import * as jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
standalone: true,
imports: [CommonModule]
})
export class AppComponent {
exportPDF() {
const data = document.getElementById('content');
html2canvas(data!).then(canvas => {
const imgWidth = 208;
const imgHeight = canvas.height * imgWidth / canvas.width;
const contentDataURL = canvas.toDataURL('image/png');
const pdf = new jsPDF.jsPDF('p', 'mm', 'a4'); // A4 size page of PDF
const position = 0;
pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight);
pdf.save('exported-file.pdf'); // Save the generated PDF
});
}
}
5.3. Add Some Basic Styling
To make table look decent in the PDF add some basic styles in app.component.css:
CSS
/* app.component.css */
.container {
text-align: center;
margin-top: 50px;
}
table {
width: 100%;
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
button {
margin-top: 20px;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
Step 6: Run and Test the Application
ng serve
Open http://localhost:4200/ in your browser. You should see a simple page with content and a button that lets you export the data to PDF, when you click the button, the content (including tables) will be exported and downloaded as PDF.
Output
Conclusion
After this tutorial You have successfully implemented the functionality to export data to PDF in Angular using jsPDF and html2canvas, this approach works with static content as well as dynamically generated content, this makes it highly flexible for use in real-world applications, you can now extend this functionality to include charts, graphs, and other elements in your PDFs.
Similar Reads
Angular PrimeNG Table Data Export
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. It provides a lot of templates, components, theme design, an extensive icon library, and much more.
6 min read
Export JSON to CSV file in Angular
In this article, we will see how to convert a JSON array into CSV and How to Export CSV as a downloadable file by using Blob in angular 8. The below approach will be followed. Steps to Export the JSON to CSV FileStep 1: Converting JSON to CSV For converting JSON data into CSV format using the follow
4 min read
How to export our DataGrid as CSV in ReactJS ?
GridToolbarExport Component allows the user to access the displayed data and export the DataGrid to CSV in React JS, with an extra API call. Material UI for React has this component available for us, and it is very easy to integrate. We can use the following approach in ReactJS to export our DataGri
3 min read
How to create the dynamic forms in AngularJS ?
In AngularJS, we need to create dynamic forms to make the user interact. We can create and apply different behaviors to the forms to represent and accept the data from the user. We can create dynamic forms using ng-repeat and ng-show in AngularJS. In this article, we will see how we can create dynam
7 min read
How to Create a new module in Angular ?
Modules are most important when it comes to building strong and scalable Angular applications. They help organize your code, promote modularity, and improve maintainability. It encourages collaboration among developers by grouping related components, directives, pipes, and services. In this article,
3 min read
How to Filter Multiple Values in AngularJS ?
AngularJS is one of the popular frameworks of many web developers to create dynamic single-page web applications. To make the application more and more dynamic, we can use the filtering of data feature to dynamically show the data to the user as per the input or selection. These provide a better use
6 min read
How to create a new component in Angular?
A component in Angular is the building block for making web pages. It is a reusable block of code that can be used anywhere in the app any number of times. It provides scalability, reusability, and readability. Each component does a specific job like showing a menu, a photo or a card, etc. In this a
3 min read
How to print an array in table format using angularJS?
Given an array & the task is to print the given array in the tabular format using AngularJS. In JavaScript, data can be stored in the form of arrays. Each of the array items has unique indexing, starting from 0. But what if the developer wants to display all the items that are in the array, on t
4 min read
How to Implement Angular Forms?
Creating a Form in Angular includes the use of directives such as ngSubmit and ngModel. We will be using a functional component to render the elements. Various HTML elements are created in the project. To implement the project we will create the styling using CSS. Prerequisites:Functional Components
4 min read
How to use Quilljs Editor in Angular 15
Quill.js is a very useful text editor designed for web applications. It's a user-friendly interface for creating and formatting rich text content including support for various text styles, fonts, colors, and embedding multimedia elements like images and videos. That is similar to rich text editors.
3 min read