How To Convert HTML Page To PDF In Angular 11?
In this tutorial, you and I learn how to convert HTML pages to pdf in angular 11. Angular 11 HTML to pdf example. how to implement an Angular 11 generate pdf from HTML.
This tutorial will use jspdf, html2canvas, and jspdf package for generating pdf files from HTML. any project Many times we get the requirement to convert HTML to pdf in angular content to save in image format or pdf format for sending a report to users email many times. So, here I am going to explain about converting angular HTML to PDF content into PDF files in angular application. And will help you step by step on how to generate HTML to pdf angular 11 app.
Step 1: Create an Angular app using CLI
First of all, We Create an angular app with the below command and move it into the project folder to convert HTML to pdf Angular:
ng new angular-to-pdf
Step 2: Install dependencies:
This step As discussed earlier, Going to install the other dependency library needed:
npm install jspdf npm install html2canvas
Step 3: update app.component.ts file
This step We need to update the ts file to perform the required task is a pdf js angular 11, So open the app.component.ts file and put below code:
import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import * as jspdf from 'jspdf';
import html2canvas from 'html2canvas';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'html-to-pdf-angular-application';
public convetToPDF() {
var data = document.getElementById('contentToConvert');
html2canvas(data).then(canvas => {
// Few necessary setting options
var imgWidth = 208;
var pageHeight = 295;
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;
const contentDataURL = canvas.toDataURL('image/png')
let pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF
var position = 0;
pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)
pdf.save('new-file.pdf'); // Generated PDF
});
}
}
In the above file, we have imported the jspdf and html2canvas library in our ts file in convert HTML to pdf angular. Below that we have a method in which we will create a button click from an HTML file, we are getting the content from the id content to convert and converting it to the pdf file. We learn how to convert HTML page to PDF In angular 11.
Step 4: Update app.component.html file
<div>
<strong>How To Convert HTML Page To PDF In Angular 11? - phpcodingstuff.com</strong>
</div>
<div>
<input type="button" value="Convert" (click)="convetToPDF()"/>
</div>
<div>
<table id="contentToConvert">
<tbody>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>A Company</td>
<td>Robert look</td>
<td>Germany</td>
</tr>
<tr>
<td>B Company</td>
<td>Chnage</td>
<td>Mexico</td>
</tr>
<tr>
<td>C Company</td>
<td>Mantodal</td>
<td>Austria</td>
</tr>
<tr>
<td>D Company</td>
<td>Heltenosolu</td>
<td>UK</td>
</tr>
<tr>
<td>E Company</td>
<td>tatumore</td>
<td>Canada</td>
</tr>
<tr>
<td>F Company</td>
<td>verlose</td>
<td>Italy</td>
</tr>
</tbody>
</table>
</div>
In the above file, We have a dummy content in this form which will be converted into a pdf file and a button at the top on clicking which request is passing for pdf file then convert HTML page to pdf in angular 11.
Step 5: Run the app
After completing all the needed steps, Run the app with the below command
ng serve --o
Check the app over the browser after running the above command.
I hope it can help you...
Leave a Reply