DEV Community

Generating Pdf documents in React Using React-pdf

Nero Adaware on July 22, 2019

This post was originally published on my Blog, check it out for more contents. Introduction I was working on a project recently and I...

Read full post

Stephen Marshall • Sep 30 '19

Thanks for this! If anyone is curious about a real-life use case, I'm doing the same thing at work right now...

Digital mktg team: We need to generate a 35 page PDF SEO report with all the stats!
Seo team: OK! Go to our SEO service provider, and get the data you need from their GUI!
Digital mktg team: Umm, that's a lot of steps and takes a long time/not very efficient way to generate such a lengthy report! And we need to make a lot them!
Business Intelligence (Me): Say no more! I'll build a react app, and make an API call to get the data we need, and generate the report on the fly so you can download it!

Alexander B.K. • Nov 12 '19

I probably have visited React-pdf site several months ago, I am not sure. But then I found pdfmake, I tried it and it met my requirements, so I have been using it until now.
However, maybe I will give React-Pdf a try.

Reuven Etzion • Jun 2 '20

Could not find module in path: '@react-pdf/unicode-properties' relative to '/node_modules/@react-pdf/fontkit/dist/fontkit.browser.es.js'

Espérant Kela • Jan 13 '23 • Edited

hello nero

I am using @react-pdf render for my react application.

it generated the component in pdf, the problem now is at the level of display of the data coming from my api which are saved in html tags. it displays like this:

<h1>My Title</h1>

or I would like it to display without the tags. there is also no way to use dangerouslySetInnerHTML

please kindly help me. I'm stuck on it

kirlisakal • Oct 19 '19

In this example, I can quickly get PDF doc, however, on my project, I want to get data-table report, and it is too slow... after 5 minutes, I canceled.
Do you think is there a reason for this?

Here is my code:

Nero Adaware • Oct 19 '19

Can you a simple demo in codesandbox

kirlisakal • Oct 21 '19

Hi Nero,
There are PDF Render codes on my question post, jsFiddle, HTML section.
fields and records array, and this is simple structure.

I guess, for each styling property, renderer works too much. When try to minimize styling it renders quicker.

Zenobius Jiricek • May 12 '20

you're not include react or react-pdf in that fiddle. ( jsfiddle.net/y2nu9ek7 )
you've just put the jsx in the html section.

Like Nero says.... if you want help from anyone put your example up on a sandbox that properly supports playing with react.

Alexander Chavers • Nov 13 '21

What is the proper way to reference the source for images stored as a byte array? I get a PDF to generate just fine, but only with URLs, not using my incoming byte arrays.

Currently looking at something like this:

Siddharth • May 25 '21 • Edited

I am using a similar logic, but it's making my page unresponsive.
Can someone help
this.state.prescription - is the state variable where api response is stored

{Object.keys(this.state.prescription).length > 0 ? <PDFDownloadLink document={<DownloadPrescription prescription={this.state.prescription} />} fileName="prescription.pdf">
                            <i class="bi bi-download section1_row_icons"></i>
                        </PDFDownloadLink> : null}

sagar-1987 • Jun 6 '20

Hello Nero its a wonderful solution , Thanks for that , I have a requirement where i have a download button in a table rows , so on click of download button of a specific row of table i need make a API call to get the details which need to be displayed in PDF, How can we achieve this using this solution . Thanks . Waiting for the reply :)

kritikgarg • Apr 4 '23 • Edited

👏 Thank you for sharing an excellent post, Nero! It's amazing to see how React-pdf simplifies the process of generating PDF documents in React. 👨‍💻 As a developer, I found this very helpful for those who want to incorporate PDF generation into their React applications. 📄💻

👉 Along with this, I recently came across an informative article on Effortlessly Generate PDF Quotes with Salesforce that provides a complete guide on how to generate PDF quotes with Salesforce. It's a great resource for those who are looking to generate quote PDFs in Salesforce. 📄💻

Alexander B.K. • Dec 9 '19

I have tried it yesterday. Seeing that the document used JSX, I thought it could contain HTML element. But I was disappointed, because it didn't support HTML element at all. My goal is to use HTML table in this react-pdf library, because my app deals with data records that will be displayed in tabular format, like in HTML table.
This means I still have to find my own way in order to display my data in tabular format, using only available features in this library : view, text and styles.

Zenobius Jiricek • May 12 '20

You'd have to do something around the use of the Text component and some awesome styling to implement your own table

Truong Hoang Dung • Jul 22 '19

I tried downloading pdf from your codesandbox but the pdf is empty.
Is there anything wrong here ?

Nero Adaware • Jul 22 '19

Did you select a year first? I just modified it to hide the download tag until you have selected a year. If it still doesnt work then tell me

Truong Hoang Dung • Nov 30 '19

I tried to install using webpack (with Razzle.js), but keep getting error:

Uncaught RangeError: Offset is outside the bounds of the DataView
    at DataView.getUint32 (<anonymous>)
    at new UnicodeTrie (index.js:52)

Do you know how to fix this ?

pam8351 • Feb 11 '20

I selected year, but the page still shows "Loading please wait". I also, developed the similar page and seeing the same response when the content is more than 1 page of PDF.

Can you please help me to resolve this issue?

return (

    <Document>
        <Page style={styles.page} wrap>
            <View style={styles.movieDetails}>
                                    <Text style={styles.documentTitle}>Release 20.1 US</Text>
                                    <Text style={styles.documentTitle}>Test Execution detailed report</Text>
            </View>
            </Page>

            <Page pageNumber={25} width={600}  wrap>
            {props.data
                ? props.data.map((a, index) => {
                        return (


                               <View style={styles.TestContainer}>
                                <View style={styles.movieDetails}>
                                    <Text style={styles.testTitle}>{a.Test_name}</Text>


                                    </View>

                                    <View style={styles.detailsFooter}>
                                    <Text style={styles.testStatus}>Test Status :{a.Test_status}</Text>
                                    <Text style={styles.textLeft}>Test Application :{a.Application}</Text>
                                    <Text style={styles.textLeft}>Testing cycle :{a.Target_cycle}</Text>
                                    </View>
                                    <View style={styles.detailsFooter}>
                                    <Text style={styles.textRight}>Testing Type     :{a.Testing_type}</Text>
                                    <Text style={styles.textRight1}>  Executed by    :{a.Executed_by}</Text>
                                    </View>
                           </View>
            );
            })
        : ""}
        <Text style={styles.pageNumber} render={({ pageNumber, totalPages }) => (
    `${pageNumber} / ${totalPages}`
  )} fixed />
        </Page>
    </Document>
);

Gaurav Kumar Sinha • Oct 12 '22

I need one help here. I have been using html2canvas and jspdf to grab the current page and then convert to PDF but I am having unexpected page breaks in middle of image or graphs in the page. Is there a way to implement customized pdf with fixed header and footer in each page and at the same time avoid page breaks like described above. Please let me know if you have delt with such a scenario.