Let's generate PDF of customized content in React

In React application, if you want to give a functionality to print a PDF or save as a PDF of given contents. This article will help you to generate a pdf document of content of your own design. This will give you a popup to print the compenent data in PDF with given styles.

Let's get started:

So, in React, you should have a component where you need to make a button, and when you click on that button, your pdf will be creted of your given design. Suppose you have a component "Print.js" and in this component you will have a button with label Download PDF.

                             <Button onClick={() => handlePDFDownload()}>Download PDF</Button>
                            

And you need to handle click event of Download PDF button.

Let's write the code to handle the click event of Download PDF button.

The below code will return the layout and data of the PDF, this will help you to customize the layout.

                        const getPDFTemplate = (data, currency, styles) => {
                            const template = (
                              <Document>
                                <Page>
                                  <View style={styles.table}>
                                    <View>
                                      <Text style={styles.heading}>Products</Text>
                                    </View>
                                    <View style={[styles.row, styles.bold, styles.header]}>
                                      <Text style={styles.row1}>ITEM NAME</Text>
                                      <Text style={styles.row2}>QTY</Text>
                                      <Text style={styles.row3}>PRICE</Text>
                                      <Text style={styles.row4}></Text>
                                      <Text style={styles.row5}>Item Category</Text>
                                      <Text style={styles.hr}></Text>
                                    </View>
                                    {data.map((row, i) => (
                                      <View key={i} style={styles.row} wrap={false}>
                                        <Text style={styles.row1}>
                                          <Text style={styles.bold}>{row.name}</Text>
                                        </Text>
                                        <Text style={styles.row2}>{row.quantity}</Text>
                                        <Text style={styles.row3}>{currency}</Text>
                                        <Text style={styles.row4}>{row.price}</Text>
                                        <Text style={styles.row5}>{row.itemCategory}</Text>
                                      </View>
                                    ))}
                                  </View>
                                </Page>
                              </Document>
                            );
                            return template;
                          };
                        

The below codes will help you to apply the style of your layout:

                        const getStyles = () => {
                            const styles = StyleSheet.create({
                              hr: {
                                borderTop: '1px solid #8c8b8b',
                                border: '1px solid red',
                                height: '2px'
                              },
                              heading: {
                                fontWeight: 'bold'
                              },
                              table: {
                                width: '100%',
                                padding: '20px',
                                border: '1px solid red'
                              },
                              row: {
                                display: 'flex',
                                flexDirection: 'row',
                                borderTop: '1px solid #EEE',
                                paddingTop: 8,
                                paddingBottom: 8
                              },
                              header: {
                                borderTop: 'none'
                              },
                              bold: {
                                fontWeight: 'bold'
                              },
                              // So Declarative and unDRY 👌
                              row1: {
                                width: '27%'
                              },
                              row2: {
                                width: '15%'
                              },
                              row3: {
                                width: '15%'
                              },
                              row4: {
                                width: '20%'
                              },
                              row5: {
                                width: '27%'
                              }
                            });
                            return styles;
                          };
                    
                        

The below codes will download the PDF in your browser.

                        const downloadPDF = async (items, currency) => {
                            const styles = getStyles();
                            const template = getPDFTemplate(items, currency, styles);
                            let blob;
                            try {
                              blob = await pdf(template).toBlob();
                            } catch (error) {
                              console.log('error :', error);
                              return;
                            }
                            const fileName = 'selectedItem.pdf';
                            download(blob, fileName);
                          };
                        

The below codes is the handler function of click event, this handlePDFDownload function will be called when you click on the Download PDF button.

                        const handlePDFDownload = async () => {
                            console.log('Download PDF Clicked');
                            const items = [
                            {
                              "name": "IPhone 12",
                              "price": 1200,
                              "quantity": 10
                            },
                            {
                              "name": "MacBook",
                              "price": 30000,
                              "quantity": 10
                            },
                            {
                              "name": "Intel Core",
                              "price": 4500,
                              "quantity": 20
                            }
                          ]
                            downloadPDF(items, 'IDR');
                          };
                    

Import below lines in your component on the top after downloading the dependencies:

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

Add dependencies in your package.json file:

Need in install following dependencies in your App.

npm install @react-pdf/renderer downloadjs --save

Here is the PDF that we have generated through our codes:

---

Conclusion:

In this article, we learned how we can generate PDF of customized content in React.