How to integrate Angular and Pdfme

  • Akshay Shendkar, Siddhesh Kand
  • Nov 23, 2022
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

Copyright © 2022 Oxvsys Automation Technologies Pvt. Ltd.