Creare PDF con Angular e pdf-lib

pdf-lib è una libreria per Javascript per la creazione / modifica di PDF.

Oggi vediamo come usarla in un progetto Angular e con Typescript.

Cominciamo con l'installazione:

npm install --save pdf-lib

Poi questo il nostro componente:

import {Component, OnInit} from '@angular/core';
import {PDFDocument} from 'pdf-lib'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {

  constructor() {
  }

  ngOnInit(): void {
  }

  async creaPdf() {
    const pdfDoc = await PDFDocument.create()
    const page = pdfDoc.addPage()
    page.drawText('Pdf da Angular!')
    const pdfBytes = await pdfDoc.saveAsBase64({dataUri: true});
    console.log(pdfBytes);
  }
}

Salviamo il PDF in BASE64 e lo stampiamo in console.

Lato HTML:

<button(click)="creaPdf()">Crea PDF</button>

Enjoy!