angular
Assuming you have read our angular getting started blog.
Today we will integrate pdfme library which is one of the best client-side pdf generation libraries out there.
First, let's install the library in your angular project via
npm i @pdfme/generator
1. Then let's add a simple button in app.component.html
<button (click)="genPDF()">Download</button>
2. Then inside app.component.ts
import { Component, OnInit } from '@angular/core';
import { Template, BLANK_PDF, generate } from '@pdfme/generator';
const template: Template = {
basePdf: BLANK_PDF,
schemas: [
{
a: {
type: 'text',
position: { x: 0, y: 0 },
width: 10,
height: 10,
},
b: {
type: 'text',
position: { x: 10, y: 10 },
width: 10,
height: 10,
},
c: {
type: 'text',
position: { x: 20, y: 20 },
width: 10,
height: 10,
},
},
],
};
const inputs = [{ a: 'a1', b: 'b1', c: 'c1' }];
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
ngOnInit(): void {
}
genPDF() {
generate({ template, inputs }).then((pdf) => {
console.log(pdf);
// Browser
const blob = new Blob([pdf.buffer], { type: 'application/pdf' });
window.open(URL.createObjectURL(blob));
});
}
}
3. Voila! It's that simple. Now you can download the sample pdf.
Also if you get an error related to Javascript max heap you can try
node --max_old_space_size=8048 ./node_modules/@angular/cli/bin/ng serve
If you want to learn more about pdfme head over to the following links