📄 Create PDF files using React

Last update: Jan 7, 2023

Related tags

Overview

React renderer for creating PDF files on the browser and server

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

How it works

import React from 'react';
import { Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer';

// Create styles
const styles = StyleSheet.create({
  page: {
    flexDirection: 'row',
    backgroundColor: '#E4E4E4'
  },
  section: {
    margin: 10,
    padding: 10,
    flexGrow: 1
  }
});

// Create Document Component
const MyDocument = () => (
  <Document>
    <Page size="A4" style={styles.page}>
      <View style={styles.section}>
        <Text>Section #1</Text>
      </View>
      <View style={styles.section}>
        <Text>Section #2</Text>
      </View>
    </Page>
  </Document>
);

`Web.` Render in DOM

import React from 'react';
import ReactDOM from 'react-dom';
import { PDFViewer } from '@react-pdf/renderer';

const App = () => (
  <PDFViewer>
    <MyDocument />
  </PDFViewer>
);

ReactDOM.render(<App />, document.getElementById('root'));

`Node.` Save in a file

import React from 'react';
import ReactPDF from '@react-pdf/renderer';

ReactPDF.render(<MyDocument />, `${__dirname}/example.pdf`);

Examples

For each example, try opening output.pdf to see the result.

Text

Images

Resume

Fractals

Knobs

Page wrap

To run the examples, first clone the project and install the dependencies:

git clone https://github.com/diegomura/react-pdf.git
cd react-pdf
yarn install

Then, run yarn example -- <example-name>

yarn example -- fractals

Contributors

This project exists thanks to all the people who contribute. [Contribute].

Backers

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

License

MIT © Diego Muracciole

Comments

React-pdf v2.0
Ongoing effort for a new react-pdf 2.0 version

Goals behind this idea

Improve performance: I believe react-pdf can be much much faster. There are some bottlenecks we can't avoid, such as assets fetching, but there are some other fields in which there's a lot of room for improvements. I already rewrote textkit to be much faster and reliable, and has proven to be so. Fixes #544

Embrace immutability: One of the main cause of issues right now is dealing with the mutable nature of react-reconciler while having an asynchronous rendering process, creating race conditions. Having an immutable process will solve many of these conflicts. Fixes #310, Fixes #420

Make it functional::It's not that I don't like classes, but I believe that functional programming paradigms can help a lot on breaking the whole rendering process in smaller and testable bits (see below). We are already using ramda on textkit, so this will come basically for free. This will have a positive impact on test coverage and bundle size

Improve page wrapping: The current solution works decently (even though it has some issues), but it's quite expensive time-wise. I believe we can improve this by dealing with simpler objects and re-calculating yoga nodes fewer times. Fixes #476, Fixes #584

Dynamic imports: react-pdf uses many heavy dependencies throughout the process. Would be cool for react-pdf to import only the ones needed based on the components you use.

New layout/rendering process

To know about the current process please go here (simplified version). In detail, the new version will do:

[x] Internal structure creation (by the reconciler)

[x] Resolve page sizes

[x] Tree linting

[x] Link/text replacement

[x] Notes should only have text instances inside

[x] Remove page margins

[x] Page padding percentage translation

[x] Page immediate childs height percent translation

[x] Flatten styles (many might be provided)

[x] Expand styles (border to borderTopStyle, borderTopWidth, ...)

[x] Transform style values (borderTopStyle: 1 solid red to borderTopStyle: solid)

[x] Resolve units ("1in" to 72)

[x] Inherit styles

[x] Fetch assets

[x] Resolve node layout (Yoga to the rescue)

[x] Text layout

[x] Pagination (might be necessary to loop to previous step)

[x] Break text (w/ orphans & widows protection)

[x] Dynamic nodes

[x] Fixed nodes

[x] SVG Support

[x] Resolve node origin

[x] Translate relative coordinates to absolute ones

[x] PDF instance creation

[x] Add PDF metadata

[x] Render PDF

[x] Render Page

[x] Apply transformations

[x] Render Background

[x] Render Borders

[x] Render View

[x] Render Text

[x] Render Link

[x] Render Note

[x] Render Canvas

[x] Render Image

This might change based on unknown blockers

SVG progress

[x] Basic nodes

[x] Translate image to yoga position

[x] Aspect ratio support

[x] Transformations

[x] Basic fill and stroke styles

[x] Viewport support

[x] Inherit styles

[x] Text support

[x] Clip paths

[x] Gradients

Todo

[x] Percent border radius

[x] z-index support

[x] Resolve (image) object fit

[x] Ruler support

[x] wrap support

[x] minPresenceAhead support

[x] Parse rgb, rgba and cmyk colors

[x] Deprecate old font API

[x] Image src async fn

[x] Style text links

[x] Opacity

[x] Emoji rendering

[x] Study performance bottle necks

[x] setPointScaleFactor support (Fixes #548)

[x] Add ref links support

Finished new features

Percent border radius

Z-index support

Other cool ideas in mind

Better dynamic rendering: Not as easy as it seems, but providing the page number and layout data (width, height, x, y, etc) on nodes would make this tool way more powerful

calc support: This is also not as simple as it seems, since yoga does not support this task. Having this feature built in on top of react-pdf would mean to layout things 2 or more times, but it might be possible. Refers #610

Image rendering: if you look at the process, PDF does not come into play until the very last part of the layout process. In this point we will now be able to grab the same input but throw it into another target, such as PNG or JPEG images.

z-index support: This shouldn't be that much of a deal with this approach. We can sort the nodes after layout calculation and before rendering

CSS filters: Since now we can plug any intermediate step more easily, implementing CSS filters (such as brightness or constrast) shouldn't be that hard. Images would be the most daunting piece to solve but it's totally doable (maybe use colors?)

Enhanced REPL: For the REPL, we could go up to the "Page wrapping" step and implement a DOM rendering engine instead of a PDF one. By doing this we could have a much faster and extensible REPL without using pdfjs at all.

Fixes #29 Fixes #339 Fixes #476 Fixes #1121 Fixes #718 Fixes #1063 Fixes #836 Fixes #1133 Fixes #1104 Fixes #1050 Fixes #1041 Fixes #1016 Fixes #1008 Fixes #1000 Fixes #973 Fixes #917 Fixes #898 Fixed #850 Fixes #476 Fixes #470 Fixes #517 Fixes #669 Fixes #1125 Fixes #1093
opened by diegomura 111
Attempted import error: 'create' is not exported from 'fontkit' (imported as 'fontkit').

After the upgradation, we are getting the below error in local and while deploying the code. Please help here.

Current version in our machine : @react-pdf/renderer": "^2.0.16"

@diegomura Please help check ASAP.

opened by rajan-gupta-12 63
Uncaught Error: stream.push() after EOF

OS: Chrome Version 70.0.3538.110 (official Build) (64 bit)

React-pdf version: 1.0.0 "@react-pdf/renderer": "^1.0.0", "@react-pdf/styled-components": "^1.2.0",

Description: With the last update made 7 days ago the console show this error, before the update the pdf works correctly.

_stream_readable.js:271 Uncaught Error: stream.push() after EOF at readableAddChunk (_stream_readable.js:271) at PDFDocument../node_modules/readable-stream/lib/_stream_readable.js.Readable.push (_stream_readable.js:245) at PDFDocument._write (pdfkit.browser.es.js:3731) at PDFReference.finalize (pdfkit.browser.es.js:255) at PDFReference.end (pdfkit.browser.es.js:247) at PNGImage.finalize (pdfkit.browser.es.js:3162) at pdfkit.browser.es.js:3202 at Deflate.onEnd (index.js:225) at Deflate../node_modules/events/events.js.EventEmitter.emit (events.js:96) at endReadableNT (_stream_readable.js:1010) at afterTickTwo (index.js:27) at Item../node_modules/process/browser.js.Item.run (browser.js:153) at drainQueue (browser.js:123)
bug

opened by manolobattistadev 62
Generate PDF on the fly

Thanks for a great library I was playing around with something similar recently.

This is what I am trying to solve currently and wondering if it is/will be possible with react-pdf: I need to be able to generate loads of different PDFs in our platform and would love to do that fully on the frontend. The user clicks download button which allows him to download a generated PDF by something like react-pdf?
new feature

opened by knowbody 62
feat: compatibility with modern web bundlers and browsers
As discussed in #1317, react-pdf currently cannot be used out of the box with modern ES bundlers such as Vite or Rollup (which react-pdf even uses itself for building the various packages). The reason was that react-pdf contains code which references node.js builtin modules such as Buffer, stream, zlib etc., which are not natively available in browsers.

This PR creates new browser-specific builds for all the @react-pdf packages that need it. This way, I was able to leave the node.js-specific builds almost untouched. After this PR, react-pdf can be used in an app without having to add any bundler config (such as described here for Webpack 4 and 5) or bundler shims (such as this one for Vite). You can simply install @react-pdf/renderer and start using it right away, the way it should be.

Fixes #1317, fixes #1645, fixes #1899, fixes #1847, fixes #1886, fixes #1744, fixes #1670, fixes #1669, fixes #1915, fixes #1786, fixes #1944, fixes #1966

To acheive this, I had to bundle some commonjs dependencies with the browser versions of react-pdf:

blob-stream

restructure

dfa (was already bundled before)

vite-compatible-readable-stream

browserify-zlib

This was necessary because these packages are in commonjs format (instead of ES6 module format) and will be misinterpreted when using a modern ES6 module bundler.

(Fun fact, I actually did the whole thing twice, but the first time around I learned so much about rollup that I decided it was worth doing a second time because the resulting rollup configs would be much cleaner :laughing:)

While I was at it, I also updated the restructure package to the latest version, which has been requested in #1451 for a long time now.

TODO:

[x] Test in Vite (done by @carlobeltrame)

[ ] Someone else test in Vite, development (@thekevinbrown)

[ ] Someone else test in Vite, production build (@thekevinbrown)

[ ] Test on Node.js (@thekevinbrown)

[ ] Test in Webpack 4 (@diegomura or @jeetiss ?)

[ ] Test in Webpack 5 (@jeetiss ?)

[ ] If it works without additional config in Webpack 4 / 5, remove the corresponding documentation

[ ] Optional: Test in a web worker (@carlobeltrame) - having some trouble with React 18 features currently
opened by carlobeltrame 61

Issue with flexbox under page with wrap

Hi React PDF,

I am noticing some issues with flexbox after applying the wrap flag to the parent page. For example, I cannot get a component to wrap in a flex row. What happens visually is the second nested component (in this case the red box) simply disappears. The component below is a simple example:

const styles = StyleSheet.create({
  main: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    backgroundColor: 'green',
  },
  blue: {
    width: 200,
    height: 200,
    backgroundColor: 'blue',
  },
  red: {
    width: 200,
    height: 200,
    backgroundColor: 'red',
  },
});

const Info: React.StatelessComponent = () => {
  return (
    <View>
      <View style={styles.main}>
        <View style={styles.blue} />
        <View style={styles.red} />
      </View>
    </View>
  );
};

And I try to render it like so:

  return (
    <Document title={copy.documentTitle}>
      <Page size="A4" style={styles.page} wrap>
        <View style={styles.container}>
          <Info  />
        </View>
      </Page>
    </Document>
  );

Please let me know how to fix this? Thanks!

Sincerely, Laura

opened by flaurida 40

React-pdf landing page

We will need a landing page to promote the library.

I imagined it can have something like a repl, similar how babel does, where you can type code and see the rendered document on the right. Maybe react-playground can be used for that.

Design ideas and contributions will come very handy.
new feature

opened by diegomura 40
Issue rendering images via component

I have been unable to correctly load images via the component in React PDF.

I had issue locally in my code but have also been able to replicate the same issue on the image test page https://react-pdf.org/repl?example=images

This works and renders (test image) https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg

This will not render (test image) https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_default_1x.png

Is there something that the component needs to support this?

The images I wish to load for my project will be PNG but these look to be supported.

Any help would be greatly appreciated
bug

opened by grantburnham 34
Memory Leak
Before I get into the issue, I just wanted to thank @diegomura and others for your work and responsiveness on this wonderful library! Your efforts are greatly appreciated.

OS:

Amazon Linux aws-elasticbeanstalk-amzn-2018.03.0.x86_64-nodejs-hvm-201809210902 (ami-00d787dad6adc69a1) on AWS Elastic Beanstalk

Also, macOS 10.13.6

React-pdf version: 1.0.0-alpha.24, 1.0.0-alpha.25 Node v8.9.3

Description: We are consistently observing a memory leak, with the memory footprint of our node process growing linearly with each generated PDF until eventually exhausting the resources on our servers.

My team saw https://github.com/diegomura/react-pdf/issues/165 (now closed), but we are uncertain as to whether what we are experiencing is related or not. As noted above, we have tried using both alpha.24 and alpha.25 with the same results.

We first noticed the memory leak on servers running in AWS via ElasticBeanstalk (Amazon Linux) but have since been able to recreate it on our local development environments running macOS 10.13.6. We attempted isolating the source of the leak ourselves but have not yet come up with anything conclusive. We're not even sure if the memory leak is (as before) related to a dependency vs the react-pdf code itself, but we are hoping you might be able to identify something more readily.

How to replicate issue: We created a small project with limited dependencies that should allow you to recreate the issue as we see it. Zip attached here: pdfGenerator.zip

There are instructions in server.js, repeated below:

RUN $ yarn / npm install and then run: $ npm run start-with-chrome-inspect

In a Chrome browser window, go to http://localhost:3000/.

In a new tab go to: chrome://inspect/#devices and click inspect under the target. In the devtools window, select the Memory tab at the top. Select 'Heap snapshot'. Click 'Take snapshot'.

Open http://localhost:3000/pdf in a new tab.

Go back the devtools window and click the dark circle icon at top-left above the Profiles pane to generate another snap.

Repeat steps 4 and 5 repeatedly and you can see the retained memory increase. (JSArrayBufferData especially)

An alternate path to viewing the memory leak at a higher level is to monitor via pm2: $ yarn / npm install pm2 $ pm2 start server.js $ pm2 monit -- proceed to access http://localhost:3000/pdf repeatedly -- and watch the memory footprint grow.

Note that the memory footprint grows in proportion to the size of the PDF generated, so if you want to see it grow/leak more readily, you can create a larger PDF with more content, images, etc.

Thank you in advance for your help!
bug
opened by coreyweidenhammer 34

Cannot read property 'dereference' of undefined

I'm just trying a simple example to download a PDF with a PDFDownloadLink and its throwing the above error when the component renders.

const ReportPDF = () => (
        <Document>
            <Page size="A4">
                <View>
                    <Text>Section #1</Text>
                </View>
                <View>
                    <Text>Section #2</Text>
                </View>
            </Page>
        </Document>
    );
...
render  (
<div>
                                    <PDFDownloadLink document={<ReportPDF/>} fileName="somename.pdf">
                                        {({loading}) => loading ? <Button>Loading</Button> : <Button>PDF</Button>}
                                    </PDFDownloadLink>
                                </div>
)

bug incomplete

opened by jrichmond4 33

ESM contains server code, doesn't provide named exports
Describe the bug When using Vite to package a React app, we hit some issues because:

The ESM that @react-pdf/renderer provides doesn't seem to provide the same exports as the CJS module.

There is server code included in the ESM, but this library is a browser module.

To Reproduce You can reproduce with this repository: https://github.com/thekevinbrown/vite-react-pdf-reproduction

Expected behavior I expected React PDF to be able to be bundled and used in an ESM context.

Screenshots

Uncaught ReferenceError: global is not defined at node_modules/blob/index.js (@react-pdf_renderer.js:554) at __require (chunk-KVFJW2XH.js:12) at node_modules/blob-stream/index.js (@react-pdf_renderer.js:616) at __require (chunk-KVFJW2XH.js:12) at @react-pdf_renderer.js:126368

Desktop (please complete the following information):

OS: MacOS

Browser: Chrome

React-pdf version: "@react-pdf/renderer": "^2.0.12",

Additional Notes

An issue was logged with Vite here: https://github.com/vitejs/vite/issues/3405

This may be related to this issue as well: #1029

I'd be happy to help with a PR if one is welcome, just wanted to check to ensure I wasn't duplicating effort and that this was something you'd accept a PR for.
bug
opened by thekevinbrown 32
Can not common install react-pdf on react v18
Describe the bug Can not install common react-pdf on react v18

I still can not to use production app now util this issue fix success

To Reproduce Steps to reproduce the behavior including code snippet (if applies):

Go to '...'

Click on '....'

Scroll down to '....'

See error

Expected behavior should npm install on react 18

Screenshots

Desktop (please complete the following information):

React-pdf version [e.g. v3.0.2]
opened by DoIttikorn 0
fix: Allow credentials option in Image

Description of change: Added credentials option which is required in fetch in order to send cookies in cross-origin requests. src:mdn web docs

This PR also fixes the issue #1412

opened by PoornakumarRasiraju 0
Overlapping Text On Long Multi-Page PDFs
Describe the bug I'm building reports to display table data. These reports are quite long sometimes. Shorter reports don't seem to run into this issue at all. Basically, at some point during the rendering process, text starts to scrunch together about half way down the page making the report look very ugly and the data hard to read. I circumvented this issue in the past by generating a new Page component per student/participant, so that each student and their items resided on a single page and wrapped to a second page if necessary, but the client has complained (rightfully so) that the reports are too long this way.

To Reproduce See page 8 and onward. Link to Repl

Expected behavior Text should render consistently on every page just as it does on the very first page.

Screenshots

Desktop (please complete the following information):

OS: MacOs

Browser: Chrome Version 108.0.5359.124 (Official Build) (x86_64)

React-pdf version: 3.0.2
opened by eldieco 4
chore(deps): bump minimatch from 3.0.4 to 3.1.2
Bumps minimatch from 3.0.4 to 3.1.2.

Commits

699c459 3.1.2

2f2b5ff fix: trim pattern

25d7c0d 3.1.1

55dda29 fix: treat nocase:true as always having magic

5e1fb8d 3.1.0

f8145c5 Add 'allowWindowsEscape' option

570e8b1 add publishConfig for v3 publishes

5b7cd33 3.0.6

20b4b56 [fix] revert all breaking syntax changes

2ff0388 document, expose, and test 'partial:true' option

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 0
React 17/18 support
@react-pdf/renderer has 2 problems with react 18:

https://github.com/diegomura/react-pdf/issues/1878

https://github.com/diegomura/react-pdf/issues/1779

The last one can be solved easily, but the first one is hard because react-reconciler depends on react too. (from this message: https://github.com/diegomura/react-pdf/issues/1062#issuecomment-813804883)

It should work if we bundle react-reconciler into @react-pdf/renderer as react-dom does. so we can override any dependencies it should help but it can be dangerous

if you have a better option on how to fix this issue, welcome if you wanna bump goto #1878
new feature
opened by jeetiss 1
Is there a a way to override the render lifecycle?

I want to have a way to override the render lifecycle so that I could render multiple pdfs in a scene like environment without requiring multiple canvas'.

Is there currently a way to do that or would this require a new feature?
new feature

opened by abdobrianZverse 0