React renderer for creating PDF files on the browser and server

New react-pdf 2.0 was released. Read about the announcement

Lost?

This package is used to create PDFs using React. If you wish to display existing PDFs, you may be looking for react-pdf.

How to install

yarn add @react-pdf/renderer

Webpack 5

Webpack 5 doesn't include node shims automatically anymore and we must opt-in to all shims we want. To do this we have to add a few dependencies to our project:

yarn add process browserify-zlib stream-browserify util buffer assert

after the modules are installed, we need to adjust our webpack.config file:

constwebpack=require("webpack");module.exports={/* ... */resolve: {fallback: {process: require.resolve("process/browser"),zlib: require.resolve("browserify-zlib"),stream: require.resolve("stream-browserify"),util: require.resolve("util"),buffer: require.resolve("buffer"),asset: require.resolve("assert"),}},plugins: [newwebpack.ProvidePlugin({Buffer: ["buffer","Buffer"],process: "process/browser",}),]/* ... */}

How it works

importReactfrom'react';import{Document,Page,Text,View,StyleSheet}from'@react-pdf/renderer';// Create stylesconststyles=StyleSheet.create({page: {flexDirection: 'row',backgroundColor: '#E4E4E4'},section: {margin: 10,padding: 10,flexGrow: 1}});// Create Document ComponentconstMyDocument=()=>(<Document><Pagesize="A4"style={styles.page}><Viewstyle={styles.section}><Text>Section #1</Text></View><Viewstyle={styles.section}><Text>Section #2</Text></View></Page></Document>);

Web. Render in DOM

importReactfrom'react';importReactDOMfrom'react-dom';import{PDFViewer}from'@react-pdf/renderer';constApp=()=>(<PDFViewer><MyDocument/></PDFViewer>);ReactDOM.render(<App/>,document.getElementById('root'));

Node. Save in a file

importReactfrom'react';importReactPDFfrom'@react-pdf/renderer';ReactPDF.render(<MyDocument/>,`${__dirname}/example.pdf`);

Contributors

This project exists thanks to all the people who contribute. Looking to contribute? Please check our [contribute] document for more details about how to setup a development environment and submitting code.

Sponsors

Thank you to all our sponsors! [Become a sponsors]

Backers

Thank you to all our backers! [Become a backer]

License

MIT © Diego Muracciole

---