Quick start

Below is a full client-side example to help you get started. See https://pdfmake.github.io/docs/0.1/getting-started/server-side/ for the server-side generation logic.

tsx
// Put this triple slash comment with your TS types so that TS can recognize <pdf-*> intrinsic
// elements to provide type hinting.
/// <reference types="react-pdfmake-reconciler/react-jsx" />
 
import pdfMake from "pdfmake/build/pdfmake.js";
import type {
  BufferOptions,
  TDocumentDefinitions,
  TFontDictionary,
} from "pdfmake/interfaces";
import { PdfRenderer } from "react-pdfmake-reconciler";
import React, { FC } from "react";
 
// Write components how you would with React.
// But make sure to ultimately return <pdf-*> instrinsic elements and not DOM elements like <p>.
const MyPdfBody: FC = () => <pdf-text>Hello world!</pdf-text>;
 
// Render JSX into pdfmake input object declaration.
const doc = PdfRenderer.renderOnce(<MyPdfBody />);
 
// Render PDF on client-side and download the generated file.
const defaultFonts: TFontDictionary = {
  Roboto: {
    normal:
      "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/fonts/Roboto/Roboto-Regular.ttf",
    bold: "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/fonts/Roboto/Roboto-Medium.ttf",
    italics:
      "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/fonts/Roboto/Roboto-Italic.ttf",
    bolditalics:
      "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/fonts/Roboto/Roboto-MediumItalic.ttf",
  },
};
 
pdfMake.createPdf(doc, undefined, defaultFonts).download("myDocument.pdf");

tsx
// Put this triple slash comment with your TS types so that TS can recognize <pdf-*> intrinsic
// elements to provide type hinting.
/// <reference types="react-pdfmake-reconciler/react-jsx" />
 
import pdfMake from "pdfmake/build/pdfmake.js";
import type {
  BufferOptions,
  TDocumentDefinitions,
  TFontDictionary,
} from "pdfmake/interfaces";
import { PdfRenderer } from "react-pdfmake-reconciler";
import React, { FC } from "react";
 
// Write components how you would with React.
// But make sure to ultimately return <pdf-*> instrinsic elements and not DOM elements like <p>.
const MyPdfBody: FC = () => <pdf-text>Hello world!</pdf-text>;
 
// Render JSX into pdfmake input object declaration.
const doc = PdfRenderer.renderOnce(<MyPdfBody />);
 
// Render PDF on client-side and download the generated file.
const defaultFonts: TFontDictionary = {
  Roboto: {
    normal:
      "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/fonts/Roboto/Roboto-Regular.ttf",
    bold: "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/fonts/Roboto/Roboto-Medium.ttf",
    italics:
      "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/fonts/Roboto/Roboto-Italic.ttf",
    bolditalics:
      "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/fonts/Roboto/Roboto-MediumItalic.ttf",
  },
};
 
pdfMake.createPdf(doc, undefined, defaultFonts).download("myDocument.pdf");