In this tutorial, we will learn how to download a div section in view as a high-quality PDF file in a React app. We will be using the html2canvas library to capture the content of the div and the jsPDF library to generate the PDF.
We will also add padding to the content and improve the quality of the downloaded PDF. This tutorial will cover all the steps required to build the functionality, along with complete code snippets.
To follow this tutorial, you should have basic knowledge of React and JavaScript. You should also have a React project setup and ready to go.
Install Dependencies
First, we need to install html2canvas and jsPDF libraries using npm:
npm install html2canvas jspdf
App.js Overview
Here’s an overview of the App.js file we will be using in this tutorial:
import React from "react";
import html2canvas from "html2canvas";
import jsPDF from "jspdf";
import "./App.css";
const App = () => {
// ...
};
export default App;
Creating the Download Button
Now, let’s add a button in the App component that will be used to download the div section as a PDF:
return (
<div className="App">
<button onClick={handleDownload}>Download as PDF</button>
{/* ... */}
</div>
);
Implementing the handleDownload Function
Next, we will implement the handleDownload function that will be called when the user clicks on the “Download as PDF” button:
const handleDownload = () => {
const content = document.getElementById("content-to-download");
if (!content) {
console.error("Element not found!");
return;
}
// ...
};
Setting up HTML2Canvas
We will use the html2canvas library to capture the content of the div section. We will pass the content element and a scale factor of 3 to improve the quality of the captured content:
html2canvas(content, { scale: 3 }).then((canvas) => {
// ...
});
Configuring the PDF Layout
Now, let’s configure the layout of the PDF by adding padding to the content:
const paddingTop = 50;
const paddingRight = 50;
const paddingBottom = 50;
const paddingLeft = 50;
const canvasWidth = canvas.width + paddingLeft + paddingRight;
const canvasHeight = canvas.height + paddingTop + paddingBottom
Creating a New Canvas
Next, we will create a new canvas with the updated dimensions that include the padding. We will also set the background color for the new canvas:
const newCanvas = document.createElement("canvas");
newCanvas.width = canvasWidth;
newCanvas.height = canvasHeight;
const ctx = newCanvas.getContext("2d");
if (ctx) {
ctx.fillStyle = "#ffffff"; // Background color
ctx.fillRect(0, 0, canvasWidth, canvasHeight);
ctx.drawImage(canvas, paddingLeft, paddingTop);
}
Drawing the PDF
After setting up the canvas, we will initialize a new jsPDF instance and add the image data from the new canvas to the PDF:
const pdf = new jsPDF("p", "mm", "a4");
const imgData = newCanvas.toDataURL("image/png");
const imgProps = pdf.getImageProperties(imgData);
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
pdf.addImage(imgData, "PNG", 0, 0, pdfWidth, pdfHeight);
Saving the PDF
Finally, we will save the generated PDF with the name “content.pdf”:
pdf.save("content.pdf");
Implementing the Content Section
Now, let’s add the content section that will be downloaded as a PDF:
return (
<div className="App">
{/* ... */}
<div id="content-to-download" className="section">
<h1>Sample Heading - FreakyJolly.com</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
suscipit, lorem at convallis tincidunt, lectus sapien ultrices sapien,
a tristique sapien lacus a dolor. Fusce fringilla nibh vel elit
maximus bibendum.
</p>
<img
src="logo.png"
alt="Sample Image"
style={{ width: "150px", height: "150px" }}
/>
</div>
</div>
);
Here is the complete App.js file content:
import React from "react";
import html2canvas from "html2canvas";
import jsPDF from "jspdf";
import "./App.css";
import logo from "./logo.png";
const App = () => {
const handleDownload = () => {
const content = document.getElementById("content-to-download");
if (!content) {
console.error("Element not found!");
return;
}
html2canvas(content, { scale: 3 }).then((canvas) => {
const paddingTop = 50;
const paddingRight = 50;
const paddingBottom = 50;
const paddingLeft = 50;
const canvasWidth = canvas.width + paddingLeft + paddingRight;
const canvasHeight = canvas.height + paddingTop + paddingBottom;
const newCanvas = document.createElement("canvas");
newCanvas.width = canvasWidth;
newCanvas.height = canvasHeight;
const ctx = newCanvas.getContext("2d");
if (ctx) {
ctx.fillStyle = "#ffffff"; // Background color
ctx.fillRect(0, 0, canvasWidth, canvasHeight);
ctx.drawImage(canvas, paddingLeft, paddingTop);
}
const pdf = new jsPDF("p", "mm", "a4");
const imgData = newCanvas.toDataURL("image/png");
const imgProps = pdf.getImageProperties(imgData);
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
pdf.addImage(imgData, "PNG", 0, 0, pdfWidth, pdfHeight);
pdf.save("content.pdf");
});
};
return (
<div className="App">
<button onClick={handleDownload}>Download as PDF</button>
<div id="content-to-download" className="section">
<h1>Sample Heading - FreakyJolly.com</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
suscipit, lorem at convallis tincidunt, lectus sapien ultrices sapien,
a tristique sapien lacus a dolor. Fusce fringilla nibh vel elit
maximus bibendum.
</p>
<img src={logo} alt="Sample Image" />
</div>
</div>
);
};
export default App;
Testing the Application
Now that we have implemented all the required functionality, run your React app and test the “Download as PDF” button. It should download the div section as a high-quality PDF with the added padding.
Troubleshooting
If you encounter any issues, make sure you have installed the html2canvas and jsPDF libraries correctly and that your React app is running without any errors.
Conclusion
In this tutorial, we learned how to download a div section as a high-quality PDF with padding in a React app using html2canvas and jsPDF. This functionality can be useful in various applications, such as generating reports, invoices, or other documents that need to be downloaded as PDF files.
