How To Download PDF file in ReactJS?

Downloading files, such as PDFs, in a React application can be easily achieved using two main methods: Using the HTML DOM Anchor Object and using the fetch() Method. Both of these approaches allow you to download files and store them locally, but they differ in flexibility and complexity. Let's explore both methods in detail:

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.

import React from "react";

const App = () => {
    const onButtonClick = () => {
        const pdfUrl = "Sample.pdf";
        const link = document.createElement("a");
        link.href = pdfUrl;
        link.download = "your file name.pdf";
        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;

Output

In this example

• The onButtonClick function creates a new <a> element using document.createElement("a"), which will serve as the download link for the PDF file.
• The href attribute of the anchor is set to the pdfUrl, which points to the PDF file, and the download attribute specifies the desired filename for the downloaded file.
• The link is temporarily added to the document body, a click event is simulated using link.click(), and then the link is removed from the body, allowing the file to be downloaded.

2. Using fetch() method

The fetch() method allows you to fetch PDF files from a server or URL and download them dynamically. Unlike the anchor tag approach, this method fetches the file asynchronously and provides more flexibility, especially if the file is hosted elsewhere or fetched via an API.

import React from "react";

const App = () => {
    const onButtonClick = () => {
        fetch("your PDF File.pdf").then((response) => {
            response.blob().then((blob) => {
                const fileURL =
                    window.URL.createObjectURL(blob);
                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;

Output

In this example

• The onButtonClick function fetches the PDF file using the fetch() method. Once the file is fetched, it returns a response that is converted to a blob using response.blob().
• After converting the response to a blob, a URL for the PDF file is generated using window.URL.createObjectURL(blob). This URL is used as the href for the anchor element, which points to the PDF file.
• The anchor (<a>) tag is created programmatically with the href pointing to the Blob URL and the download attribute set to specify the filename. The download is triggered by simulating a click event with alink.click().

Conclusion

In this article, we explored two effective methods for downloading PDF files in React JS: Using the HTML DOM Anchor Object and Using the fetch() Method. Both approaches enable you to download and store files locally, with the Anchor Object offering simplicity for static files, and the fetch() method providing more flexibility for dynamically fetched files.

kartikmukati

Follow

Improve

Article Tags :

• Web Technologies
• ReactJS
• React-Questions