react-18-pdfmake

react-18-pdfmake

react 18 fork of react-pdfmake. Super easy way to create PDFs through react components.

Demo

https://react-pdfmake.netlify.app

Install

Careful, pdfmake is now a peerDependency.

Yarn

yarn add react-pdfmake pdfmake

NPM

npm i react-pdfmake pdfmake

Example

import React from 'react';
import {
  PDFDocument,
  PDFText,
  PDFTable,
  PDFTableRow,
  PDFTableColumn,
  PDFColumn,
  PDFColumns,
  pdf,
} from 'react-pdfmake';

export default function Home() {
  const file = React.useMemo(() => {
    return pdf(
      <PDFDocument
        pageSize="A5"
        pageOrientation="portrait"
        pageBreakBefore={(currentNode, followingNodesOnPage) => {
          return (
            currentNode.headlineLevel === 1 && followingNodesOnPage.length === 0
          );
        }}
        styles={{
          header: {
            fontSize: 18,
            bold: true,
            margin: [0, 0, 0, 10],
          },
          subheader: {
            fontSize: 16,
            bold: true,
            margin: [0, 10, 0, 5],
          },
          tableExample: {
            margin: [0, 5, 0, 15],
          },
          tableHeader: {
            bold: true,
            fontSize: 13,
            color: 'black',
          },
        }}
      >
        <PDFText style="subheader">Headers</PDFText>
        You can declare how many rows should be treated as a header. Headers are
        automatically repeated on the following pages
        <PDFText color="gray" italics>
          Headers
        </PDFText>
        <PDFColumns columnGap={10}>
          <PDFColumn width="*">Hi</PDFColumn>
          <PDFColumn width="auto">Hi</PDFColumn>
        </PDFColumns>
        <PDFTable
          headerRows={1}
          style="tableExample"
          pageOrientation="landscape"
          pageBreak="before"
        >
          <PDFTableRow>
            <PDFTableColumn style="tableHeader">Header 1</PDFTableColumn>
            <PDFTableColumn style="tableHeader">Header 2</PDFTableColumn>
            <PDFTableColumn style="tableHeader">Header 3</PDFTableColumn>
          </PDFTableRow>
          <PDFTableRow>
            <PDFTableColumn>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
              reprehenderit in voluptate velit esse cillum dolore eu fugiat
              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
              sunt in culpa qui officia deserunt mollit anim id est laborum.
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
              reprehenderit in voluptate velit esse cillum dolore eu fugiat
              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
              sunt in culpa qui officia deserunt mollit anim id est laborum.
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
              reprehenderit in voluptate velit esse cillum dolore eu fugiat
              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
              sunt in culpa qui officia deserunt mollit anim id est laborum
            </PDFTableColumn>
          </PDFTableRow>
        </PDFTable>
      </PDFDocument>
    );
  }, []);
  return (
    <>
      <button onClick={() => file.print()}>Print PDF</button>
      <button onClick={() => file.download()}>Download PDF</button>
      <button onClick={() => file.open()}>Open PDF</button>
    </>
  );
}

Credits

• pdfmake