React-pdf: How to create and download a PDF client-side with react-router 4?

[rscotten]

OS:

Mac OSX 10.13.5

React-pdf version:

1.0.0-alpha.15

Description:
I'm using react-router 4 in my SPA, and I was wondering if it's possible to use react-pdf to allow a user to create and download a PDF client-side (from within the SPA). If so, can somebody recommend how to do this? Use the "Render in DOM" approach and then download?

Or is it better to render the PDF server side?

[diegomura]

Hey @rscotten !

It's both possible to render the PDF server or client side. There's no better solution. It really depends on what you need for your project.

If you're building an SPA, by importing @react-pdf/renderer you are basically accessing the DOM bindings of this library. Which means that the document will be rendered client side.

Doing this is very simple. Anywhere in your React tree, just:

const SomeComponent = () => (
  <div>
    // Any don node you might (or might not) have
    <Document>
      <Page>
        // Document content
      </Page>
    </Document>
  </div>
);

There are some upcoming changes on how documents might be downloaded. This basically depends on if you want to actually show the document on the page or not. If you cant to show it, you can make use of the onRender prop of <Document /> to access the document blob, and from there trigger a download:

const SomeComponent = () => (
  <div>
    <a href={this.state.url}  download={`document.pdf`}>Download</a>
    <Document onRender={({ blob }) => { this.setState({ url: URL.createObjectURL(blob) }) }}>
      <Page>
        // Document content
      </Page>
    </Document>
  </div>
);

There's no a nice way to download the document without actually mounting it in the DOM yet, but I'm working on it and I hope soon will be available.

Please refer to #84 for more details on the upcoming API.

Hope this answered your doubts!

[rscotten]

@diegomura Thanks for the detailed response. Looking forward to #84 ! :)

[zheoreh]

It doesn't work. this.state doesn't exist

[diegomura]

OK, you're right. If you just copy-paste that snippet it won't work because I wrote it as a functional component, which does not have state. Write that as a class component to make it work

[zheoreh]

Yes it's state less component. But this way have there is a problem - pdf is rendered to the DOM

[diegomura]

If you don't want to render the PDF on the DOM you should use BlobProvider or PDFDownloadButton. Let's resume the conversation in #318 because it's getting hard to track

[zheoreh]

Ok. Thanks.

чт, 27 сент. 2018 г. в 0:14, Diego Muracciole [e-mail]:

If you don't want to render the PDF on the DOM you should use BlobProvider
or PDFDownloadButton. Let's resume the conversation in #318
https://github.com/diegomura/react-pdf/issues/318 because it's getting
hard to track

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/diegomura/react-pdf/issues/299#issuecomment-424872159,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AHzxQWbwiASJ1xKMC_FqGL07r6Ly2nR_ks5ue-5RgaJpZM4Wdpop
.

--
Best regards,
Eugene

Full Stack Dev
Decision Mapper