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.

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:

Let’s understand the implementation through example.

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.

Javascript

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/

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.

App.js

// 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/