@popdev/ngx-pdf-export

Angular PDF export service for table data using pdfmake, with English/LTR and Arabic/RTL support included.

Use it when you need a small Angular service that turns table data into a downloadable PDF without adding Bootstrap, PrimeNG, Tailwind, global CSS, or font asset setup.

Compatibility

| Package | Supported versions | | --- | --- | | Angular | 17, 18, 19, 20, 21, 22 | | @angular/core | >=17.0.0 <23.0.0 | | @angular/common | >=17.0.0 <23.0.0 |

The library is published as an Angular partial-Ivy package and is browser-oriented. exportTable() uses browser APIs such as window, document, Blob, and object URLs.

Install

npm install @popdev/ngx-pdf-export

Quick Start

import { Component, inject } from '@angular/core';
import { PdfExportService } from '@popdev/ngx-pdf-export';

@Component({
  selector: 'app-reports',
  template: '<button type="button" (click)="exportPdf()">Export PDF</button>',
})
export class ReportsComponent {
  private readonly pdfExport = inject(PdfExportService);

  async exportPdf(): Promise<void> {
    await this.pdfExport.exportTable({
      title: 'Students',
      filename: 'students.pdf',
      headers: ['Name', 'Phone', 'Amount'],
      rows: [
        ['Mona Ali', '+201000000000', 250],
        ['Omar Samy', '+201111111111', 300],
      ],
    });
  }
}

English / LTR Example

await this.pdfExport.exportTable({
  title: 'Payment Report',
  filename: 'payment-report.pdf',
  headers: ['Student', 'Phone', 'Status', 'Amount'],
  rows: [
    ['Mona Ali', '+201000000000', 'Paid', '250 EGP'],
    ['Omar Samy', '+201111111111', 'Pending', '300 EGP'],
  ],
  metadataItems: [
    { label: 'Rows', value: 2 },
    { label: 'Generated by', value: 'Admin' },
  ],
  columnWidths: ['*', 110, 80, 80],
});

Arabic / RTL Example

Use rtl: true for Arabic font and right alignment. Add reverseColumns: true when you want the visual table order to read from right to left. Your original headers, rows, and columnWidths arrays are not mutated.

const headers = ['اسم الطالب', 'الهاتف', 'الحالة', 'المبلغ'];
const rows = [
  ['أحمد محمد', '+201000000000', 'مدفوع', '250 جنيه'],
  ['منى علي', '+201111111111', 'قيد الانتظار', '300 جنيه'],
];

await this.pdfExport.exportTable({
  title: 'تقرير المدفوعات',
  filename: 'payment-report-ar.pdf',
  headers,
  rows,
  rtl: true,
  reverseColumns: true,
  metadataItems: [
    { label: 'عدد الصفوف', value: rows.length },
    { label: 'المجموعة', value: 'مجموعة السبت' },
  ],
  columnWidths: ['*', 110, 80, 80],
});

Preview Or Upload A PDF

Use createTableBlob() when you do not want an immediate browser download.

const blob = await this.pdfExport.createTableBlob({
  title: 'Invoices',
  filename: 'invoices.pdf',
  headers: ['Invoice', 'Customer', 'Total'],
  rows: [
    ['INV-001', 'Mona Ali', '250 EGP'],
    ['INV-002', 'Omar Samy', '300 EGP'],
  ],
});

// Preview in a new browser tab.
const url = URL.createObjectURL(blob);
window.open(url, '_blank');
setTimeout(() => URL.revokeObjectURL(url), 30_000);

// Or upload it.
const formData = new FormData();
formData.append('file', blob, 'invoices.pdf');

Global Defaults

The service works without provider setup. Use providePdfExport() only when you want app-wide defaults.

import { ApplicationConfig } from '@angular/core';
import { providePdfExport } from '@popdev/ngx-pdf-export';

export const appConfig: ApplicationConfig = {
  providers: [
    providePdfExport({
      defaultPageSize: 'A4',
      defaultPageOrientation: 'portrait',
      defaultPageMargins: [16, 18, 16, 22],
      defaultTheme: {
        titleColor: '#0f172a',
        headerFillColor: '#f8fafc',
        headerTextColor: '#111827',
        borderColor: '#e5e7eb',
      },
    }),
  ],
};

Custom Theme

PDF styling is configured with TypeScript options, not CSS.

await this.pdfExport.exportTable({
  title: 'Subscriptions',
  filename: 'subscriptions.pdf',
  headers: ['Student', 'Plan', 'Expires'],
  rows: [
    ['Mona Ali', 'Premium', '2026-10-22'],
    ['Omar Samy', 'Basic', '2026-11-05'],
  ],
  theme: {
    titleColor: '#0f172a',
    metaColor: '#475569',
    metadataFillColor: '#f8fafc',
    headerFillColor: '#dbeafe',
    headerTextColor: '#1e3a8a',
    headerBold: true,
    borderColor: '#93c5fd',
    alternateRowFillColor: '#f8fafc',
  },
});

API Reference

PdfExportService

| Method | Description | | --- | --- | | exportTable(config) | Creates and downloads a PDF in the browser. | | createTableBlob(config) | Creates a PDF Blob for previewing, uploading, or tests. | | createTableDocumentDefinition(config, fontName?) | Returns the pdfmake document definition used internally. Useful for advanced tests. |

PdfTableExportConfig

| Field | Type | Description | | --- | --- | --- | | title | string | PDF heading. | | filename | string | Download filename, for example students.pdf. | | headers | string[] | Table header labels. | | rows | Array<Array<string \| number>> | Table rows. | | metadataLines | string[] | Simple text metadata above the table. | | metadataItems | PdfMetadataItem[] | Label/value metadata table above the main table. | | rtl | boolean | Uses embedded Arabic font and right alignment when true. | | reverseColumns | boolean | When rtl is also true, reverses cloned headers, rows, and valid column widths for RTL visual order. | | pageSize | string | Defaults to A4. | | pageOrientation | 'portrait' \| 'landscape' | Defaults to portrait. | | pageMargins | [number, number, number, number] | Defaults to [16, 18, 16, 22]. | | fontSize | number | Defaults to 10 for LTR and 9 for RTL. | | titleFontSize | number | Defaults to 18. | | metaFontSize | number | Defaults to 16. | | tableMarginTop | number | Defaults to 10. | | columnWidths | Array<number \| 'auto' \| '*'> | Must match header count; otherwise all columns use *. | | cellPadding | [number, number] or [number, number, number, number] | Two values mean horizontal/vertical. Four values mean left/top/right/bottom. | | dontBreakRows | boolean | Passed to the pdfmake table layout. | | theme | PdfTableTheme | Per-export colors and header styling. |

PdfMetadataItem

interface PdfMetadataItem {
  label: string;
  value: string | number;
}

PdfTableTheme

| Field | Description | | --- | --- | | titleColor | Title text color. | | metaColor | Metadata line text color. | | metadataLabelColor | Label color for metadataItems. | | metadataValueColor | Value color for metadataItems. | | metadataFillColor | Background color for metadata item rows. | | headerFillColor | Main table header background color. | | headerTextColor | Main table header text color. | | headerBold | Header bold flag. Defaults to true when header text styling is used. | | borderColor | Main table and metadata border color. | | alternateRowFillColor | Optional alternating body row background color. |

PdfExportOptions

Use these with providePdfExport(options).

| Field | Description | | --- | --- | | defaultRtl | Default RTL mode for all exports. | | defaultPageSize | Default page size. | | defaultPageOrientation | Default page orientation. | | defaultPageMargins | Default page margins. | | defaultFontSize | Default body font size. | | defaultTitleFontSize | Default title font size. | | defaultMetaFontSize | Default metadata font size. | | defaultTableMarginTop | Default spacing above the table. | | defaultTheme | Default PDF theme. | | revokeObjectUrlDelayMs | Delay before object URLs are revoked after browser download. | | pdfMake | Advanced override for tests or custom pdfmake wiring. |

Troubleshooting

Browser-only usage

exportTable() uses browser APIs. In SSR apps, call it only from browser-only code paths such as click handlers after the app has hydrated.

Arabic text or column order

Arabic font support is embedded. You do not need to copy font files into angular.json.

For Arabic exports:

rtl: true,
reverseColumns: true

CommonJS warnings

Angular may warn about pdfmake/build/pdfmake or pdfmake/build/vfs_fonts being CommonJS modules. If your app treats that warning as noise, add those two paths to allowedCommonJsDependencies.

No CSS framework required

The package does not read Bootstrap, PrimeNG, Tailwind, or global app styles. Use theme, cellPadding, columnWidths, and font/page options to control the PDF output.

Fonts And Licenses

The package embeds Noto Naskh Arabic Regular and Bold for Arabic PDFs. Noto fonts are licensed under the SIL Open Font License 1.1. See THIRD_PARTY_NOTICES.md.

Build And Publish

ng build momen-ngx-pdf-export
cd dist/momen-ngx-pdf-export
npm pack --dry-run
npm publish --access public