Creating PDFs with ReactJS: A Step-by-Step Guide

Nowadays, most modern apps and websites are searching for a way to generate pdf files from raw and dynamic data, regardless of creating invoices, certificates, application forms and sales contracts and end up in need of a programmatic method for assembling PDF Documents.

In this blog, we will explore a popular react-based solution to generate and download pdf documents from dynamic data. This library makes it easy to generate pdf documents by using simple and typical react components.

Prerequisites

🔸 To continue with this blog, we are considering that you have a very good and clear understanding of ReactJS and its components.

Getting Started

React-pdf is a very popular Client-side pdf generation react js library. React-pdf exports a set of primitives that enables us to generate pdf by rendering things very easily. It works on the browser on the server and on mobile as a react application does.

It comes with a pdfViewer which enables you to render the document in the browser.

How It Works?

In react-pdf to generate pdf we need to use the basic components exposed by react-pdf, Which are used as primitives. Common components can be composed from these as well. Some most important components are:

🔸 <Document> It is the root of the pdf document. It’s similar to <body>.

🔸 <Page> It describes an individual page size. By default, the page size is A4.

🔸 <View> It is a general-purpose container that is used for styling and formatting similar to <div>. We can use a stylesheet. create() to get the full power of CSS and flexbox into our component.

🔸 <Text> is used to display text similar to <span>.

🔸 <Image> is used to show the image like <img>.

🔸 <Link> is used to generate hyperlinks.

Working Mechanism of React-pdf

Before generating a pdf, react-pdf goes through various steps to layout the pages and make them valid pdf. The below picture is a graphical illustration of the rendering pipeline.graphical illustration of the rendering pipeline

Fig. Working Mechanism of React-pdf

Some interesting facts about this pipeline are that some work like internal structure creation of pdf documents can be already started before all the assets such as fonts and images are loaded via a network. So this will advance the rendering process.

Implementation Steps into React App

1. Installing react-pdf library:

To start with react-pdf we need to add it to our react application.

npm install --save @react-pdf/renderer


2. Now, create a component that can be used as a pdf template. In this template, we are creating our CSS by using a stylesheet. create().

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

// Create styles
const styles = StyleSheet.create({
page: {
flexDirection: 'row',
backgroundColor: '#E4E4E4'
},
section: {
margin: 10,
padding: 10,
flexGrow: 1
},
image: {
height: "80px",
width: "80px",
marginLeft: "400px"
},
details: {
marginTop: "-80px"
},
hospital_image: {
height: "230px",
width: "230px",
borderRadius: "8px",
margin: "8px",
flexDirection: 'row',
},
data: {
color: "red",
fontSize: "20px"
}

});

// Create Document Component
const MyDocument = (props) => {
return (
< Document >
<Page size="A4" style={styles.page}>
<View style={styles.section}>
<Image src={props.data.logo} style={styles.image} alt="" />
<View style={styles.details}>
<Text>Hospital Name:</Text>
<Text style={styles.data}>{props.data.name}</Text>
<Text>Address:</Text>
<Text style={styles.data}>{props.data.address}</Text>
<Text>Pictures:</Text>
{props.data.pictures ? <>
<Image src={props.data.pictures[0]} style={styles.hospital_image} />
</> : null}
</View>
</View>
</Page>
</Document >)
};

export default MyDocument;


3. Create a main component from which you want to generate a pdf and download it.

import { PDFDownloadLink, PDFViewer } from '@react-pdf/renderer';
import React from 'react';
import "./App.css"
import MyDocument from "./Document";

const Hospital = () => {

const hospital = {
name: "Langone Hospitals",
address: "New York",
logo: "https://res-4.cloudinary.com/crunchbase-production/image/upload/c_lpad,f_auto,q_auto:eco/v1406476369/uokjcgtdwuoyhky7koi6.png",
pictures: ["https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSWjd7dU-d3JqzUXyhDVXoriGZOMS5n145lXQ&usqp=CAU"]
}

return (
<div className="container">
<img src={hospital.logo} style={{ height: "150px", width: "150px", float: 'right' }} alt="" />
<h4>Hospital Name:
<span className="hospital-detail">{hospital.name}</span></h4>
<h4>Address:
<span className="hospital-detail">{hospital.address}</span></h4>
<h4>Pictures</h4>
{hospital.pictures ?
<img src={hospital.pictures[0]} alt="" className="image" /> : null}
<br></br>
<button className="button1">
<PDFDownloadLink document={<MyDocument data={hospital} />} fileName="details.pdf" style={{ color: "white", textDecoration: "none" }}>
{({ loading }) => (loading ? 'Loading...' : 'Download as PDF')}
</PDFDownloadLink>
</button>


</div>
)
}

export default Hospital;


4. Also we can use <PDFViewer>, which is a DOM Component that ships with react-pdf. It helps to render the pdf component on the browser itself.

<PDFViewer width="800px" height="600px">
<MyDocument data={hospital} />
</PDFViewer>

Hire Our Experienced Full Stack React.js Developers to Meet Your Business Requirements.

Demo

coma

Conclusion

As we see, react-pdf is a powerful tool for generating pdf on the client side no matter what platform you are on. This versatile library offers a range of components that allow you to easily create and download PDF documents from dynamic data.

For the GitHub link click here.

Keep Reading

Keep Reading

Struggling with EHR integration? Learn about next-gen solutions in our upcoming webinar on Mar 6, at 11 AM EST.

Register Now

Let's create something together!