ngpdf

Write PDFs as Angular components, for Angular. A document is a normal component whose template uses the pdf-* elements; ngpdf lays it out, breaks it into pages and writes the PDF in the browser, or in Node with renderToBuffer from @ngpdf/core/server. The layout and PDF engine is loaded on the first render, so importing @ngpdf/core adds at most 15 KB gzipped to your initial bundle.

Docs, live demo and examples: ngpdf.dev

Install

ng add @ngpdf/core

ng add installs the package and writes example-document.ts to app/documents under the application's source root, normally src/app/documents. Add --demo-route for a /pdf-demo page with a Download PDF button, --project <name> to pick an application, or --path <folder> for another folder. It never overwrites a file, and ngpdf needs no providers. To install the package alone, run npm install @ngpdf/core.

It needs @angular/core 22 or newer, and works zoneless and with zone.js. The preview component, pdf-viewer from @ngpdf/core/viewer, also uses @angular/platform-browser, which every browser app already has.

To render on a server, renderToBuffer from @ngpdf/core/server returns the PDF's bytes in Node, with no DOM. See Server rendering.

Example: a communicators list

import { DatePipe } from '@angular/common';
import { Component, inject, input } from '@angular/core';
import { PDF_ELEMENTS, PdfRenderer } from '@ngpdf/core';

@Component({
  selector: 'app-communicators-list',
  imports: [PDF_ELEMENTS, DatePipe],
  template: `
    <pdf-document title="Lista de comunicadores">
      <pdf-page style="padding: 36; font-size: 9">
        <pdf-table [columns]="[30, '2fr', '3fr', '1fr', '1fr']">
          <pdf-row
            header
            style="padding-top: 5; padding-bottom: 5; background-color: #dd0031; color: #ffffff"
          >
            <pdf-cell style="padding-left: 4"><pdf-text>#</pdf-text></pdf-cell>
            <pdf-cell style="padding-left: 4"><pdf-text>Nome</pdf-text></pdf-cell>
            <pdf-cell style="padding-left: 4"><pdf-text>E-mail</pdf-text></pdf-cell>
            <pdf-cell style="padding-left: 4"><pdf-text>Telefone</pdf-text></pdf-cell>
            <pdf-cell style="padding-left: 4"><pdf-text>Cadastro</pdf-text></pdf-cell>
          </pdf-row>
          @for (item of items(); track item.id) {
            <pdf-row
              style="padding-top: 4; padding-bottom: 4"
              [style.background-color]="$odd ? '#f2f2f2' : '#ffffff'"
            >
              <pdf-cell style="padding-left: 4"
                ><pdf-text>{{ item.id }}</pdf-text></pdf-cell
              >
              <pdf-cell style="padding-left: 4"
                ><pdf-text>{{ item.name }}</pdf-text></pdf-cell
              >
              <pdf-cell style="padding-left: 4"
                ><pdf-text>{{ item.email }}</pdf-text></pdf-cell
              >
              <pdf-cell style="padding-left: 4"
                ><pdf-text>{{ item.phone }}</pdf-text></pdf-cell
              >
              <pdf-cell style="padding-left: 4">
                <pdf-text>{{ item.registeredAt | date: 'dd/MM/yyyy' }}</pdf-text>
              </pdf-cell>
            </pdf-row>
          }
        </pdf-table>
        <pdf-page-number format="Página {page} de {total}" style="text-align: right" />
      </pdf-page>
    </pdf-document>
  `,
})
export class CommunicatorsList {
  readonly items = input.required<Communicator[]>();
}

// Anywhere with an injection context:
const pdf = inject(PdfRenderer);
await pdf.download(CommunicatorsList, { inputs: { items }, fileName: 'communicators.pdf' });
// or: const blob = await pdf.toBlob(CommunicatorsList, { inputs: { items } });

The header row repeats on every page, a row moves to the next page whole unless it is too tall for a page below the header, and the text stays selectable.

Limits

• In the standard PDF fonts, WinAnsi only: a character outside it is drawn as ?, with a warning in development mode. Register your own fonts with providePdfFonts for anything else.
• Inside a pdf-table, horizontal padding, borders and margins on a row are ignored. Put horizontal padding on the pdf-cells.
• A unit taller than a page (a table row or row pdf-view that can't split, or a pdf-view in a column) is clipped to its page.
• Children and images of a rounded view are clipped to its corners only with an overflow other than visible.
• A bare number is in points, except in line-height, where it multiplies the font size as in CSS (line-height: 1.4). Write line-height: 14pt for points.
• Bare text inside an element other than pdf-text (<pdf-cell>{{ x }}</pdf-cell>) is laid out as an anonymous pdf-text with its parent's text styles.
• Your own components inside a document are transparent, like display: contents: their pdf-* elements are laid out as if written in place, and styles on the component's host element are ignored with a warning. Style a pdf-* element inside it instead. The same goes for the document component you render: style its pdf-document or pdf-page, not its host.
• Colors are hex (3, 4, 6 or 8 digits), rgb()/rgba(), the CSS named colors and transparent. Other forms, such as hsl(), throw.
• A table header row is not repeated on a page whose first row fits only without it and can't split below it (with a dev-mode warning).
• Images fetched from a URL have no size limit unless you set maxImageBytes.

Demo

The demo app in projects/demo builds three documents from made-up data: a capture report, a communicators list and a licences list. Run it with npm start.

Releases

Each version is listed in projects/core/CHANGELOG.md and on the releases page, with its SBOM. Versions on npm are published from GitHub Actions with provenance, which links each one to the commit and workflow that built it.

Contributors ✨

Thanks go to these people (emoji key):

Questions and ideas: Discussions. Good first issues: here.

This project follows the all-contributors specification. Contributions of any kind are welcome: see CONTRIBUTING.md.

License

MIT. Security: see SECURITY.md.