Client Side PDF Generation In Angular With jsPDF.

Client Side PDF Generation In Angular With jsPDF.

In this Angular PDF tutorial, i’m getting to share with you ways to export PDF come in Angular application exploitation the jsPDF package. we are able to generate PDF for numerous documents like invoices, reports, forms etc. in an exceedingly net application, we are able to produce pdf exploitation Browser print strategies, third party tool, and that we may transfer the PDF on the client-side.

There are few other PDF packages available such as:

— jsPDF

— PDFMake

— ng2-pdf-viewer

However, during this post, we tend to area unit about to focus solely on jsPDF generator plugin to export the PDF in Angular twelve.

The jsPDF may be a JavaScript-based module, it’s accustomed generate PDFs on the client-side, and it offers the big range of strategies that enables you to customise the PDF read simply.

You can check out the official documentation here.

What is a PDF File?

Adobe developed PDF at around Nineteen Nineties. it’s two primary goals. The primary goal was that users ought to be ready to open the documents on any hardware or software. The second goal was that whenever a user opens a PDF document that has got to look a similar.

PDFs embrace text, images, embedded fonts, hyperlinks, video, interactive buttons, forms, and more.

Setup Angular Project

Use command via Angular CLI to create a brand new Angular project.

ng new angular-jspdf

Install jsPDF Package

npm install jspdf

Usage

import { jsPDF } from “jspdf”;

// Default export is a4 paper, portrait, using millimeters for units

const doc = new jsPDF();

doc.text(“Hello world!”, 10, 10);

doc.save(“a4.pdf”);

If you want to change the paper size, orientation, or units, you can do.

// Landscape export, 2×4 inches

const doc = new jsPDF({

orientation: “landscape”,

unit: “in”,

format:

});

doc.text(“Hello world!”, 1, 1);

doc.save(“two-by-four.pdf”);



Useful String Methods In JavaScript.