0.0.9 • Published 2 years ago
react-18-pdfmake v0.0.9
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>
</>
);
}