How to download PDF file in ReactJS ?
To download pdf in React JS there are methods given in JavaScript and HTML DOM. They provide a convenient way to download files and store them in local computers. Here we will use locally stored pdf files in the project folder to use as a sample pdf downloaded by the browser.
These are the approaches to download a PDF in React JS projects.
Table of Content
Steps to create the application:
Step 1: Create a React.js application using the following command:
npx create-react-app <project-name>
Step 2: After creating your project folder, move into that directory using the following command:
cd <project-name>
Step 3: You need to copy and paste your PDF file into the Public folder.
Project Structure: Your project structure will look like this:
Downloading files in React can be tricky, but it’s a common requirement in many applications.
Approach 1: Using HTML | DOM Anchor Object
This approach use HTML DOM Anchor element to link a file adderess along with the anchor tag and download file using link.download with custom file name.
Example: Here link the anchor tag to the pdf address / URL and use link.download to to save the file in local storage.
import React from "react";
const App = () => {
const onButtonClick = () => {
const pdfUrl = "Sample.pdf";
const link = document.createElement("a");
link.href = pdfUrl;
link.download = "document.pdf"; // specify the filename
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
return (
<>
<center>
<h1>Welcome to Geeks for Geeks</h1>
<h3>
Click on below button to download PDF
file
</h3>
<button onClick={onButtonClick}>
Download PDF
</button>
</center>
</>
);
};
export default App;
Steps to run the program: To run the application using the below command:
npm start
Output: The output will be visible in http://localhost:3000/
.gif)
Approach 2: Using fetch() method
We will use the fetch() method provided by JavaScript to get PDF files from specified locations. To achieve this task we do not need to install any external module.
Example: In this example, we will use the fetch() method provided by Java Script and directly send the file name as a parameter.
// Filename - App.js
import React from "react";
const App = () => {
// Function will execute on click of button
const onButtonClick = () => {
// using Java Script method to get PDF file
fetch("SamplePDF.pdf").then((response) => {
response.blob().then((blob) => {
// Creating new object of PDF file
const fileURL =
window.URL.createObjectURL(blob);
// Setting various property values
let alink = document.createElement("a");
alink.href = fileURL;
alink.download = "SamplePDF.pdf";
alink.click();
});
});
};
return (
<>
<center>
<h1>Welcome to Geeks for Geeks</h1>
<h3>
Click on below button to download PDF
file
</h3>
<button onClick={onButtonClick}>
Download PDF
</button>
</center>
</>
);
};
export default App;
Steps to run the program: To run the application using the below command:
npm start
Output: The output will be visible in http://localhost:3000/
.gif)