August 17, 2021

How to Download PDF File in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to download pdf file in javascript. If you are creating some sort of online tool to generate pdf files and saving them on your local server or you have some pdf file available on your server and you want to make sure that your website visitors would be able to download that pdf file, then this is a must-read tutorial.

In this tutorial, we will cover how to download a pdf file on a button click using javascript as well as how to download pdf using anchor tag.

To download any file from a remote URL or remote server, you must make sure that the remote server has CORS enabled. Otherwise, you will not able to download that file.

These are 2 basic methods that you can use to download a pdf file. Both of these methods work without any issue if the pdf file is stored on your local server.

The first method involves downloading a pdf file using anchor tag and the second method involves downloading a pdf file on button click using FileSaver.js by making a fetch request.

Download PDF File Using Anchor Tag

Downloading a pdf file using an anchor tag is pretty much straightforward. You only need download attribute in your anchor element.

However, this attribute is completely optional but you must provide this attribute if you want to download any file. In the download attribute, you can specify the file name of the download file or just leave it as it is.

In case you specify a file name, then the downloaded file will be saved with that name. If you leave it as it is, then it will auto pick the file name from the value of the href attribute.

In the following example, we have one anchor element and upon click, we want to download the test.pdf file. This file is locally stored on our server. Please have a look over the code example and steps given below.

HTML & CSS

We have 3 elements in the HTML file (div, a, and button). The div element is just a wrapper for the rest of the elements.
The inner text for the anchor element is “Click Here” and the button element is “Download PDF”.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
We have added a CDN link of FileSaver.js as well as our javascript file script.js with a script tag at the bottom.
Anchor element has href attribute and it indicates the location of the file on our server.
Anchor element also has download attribute and we have provided download file name as “My Document”. As soon as a user clicks on the anchor element, the download will start and the pdf file will be saved as “MyDocument.pdf”.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    
    <div>        
        <a href="test.pdf" download="My Document">Click Here</a>
        <button>Download PDF</button>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js" integrity="sha512-Qlv6VSKh1gDKGoJbnyA5RMXYcvnpIqhO++MhIM2fStMcGT9i2T//tSwYFlcyoRRDcDZ+TYHpH8azBBCyhpSeqw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="script.js"></script>
</body>
</html>

div {
    display: flex;
    flex-direction: column;    
    align-items: center;
}

button {        
    padding: 10px 20px;
    margin-top: 10px;
}

Download PDF File on Button Click

Downloading a pdf file on a button click requires a bit of extra work. We need some mechanism to send a request to an absolute or relative URL and start the download.

This can be achieved easily with the help of fetch API and FileSaver.js library. Fetch API will take care of the request part and FileSaver.js will take care of downloading part.

The HTML and CSS code is the same as shown above. The only addition is javascript code. Please have a look over the code example and steps given below.

Javascript

We have selected the button element using the document.querySelector() method and stored it in btnDownload variable.
We have attached the click event listener to the element.
startDownload() is our event handler function and it’s asynchronous. In this function, the url variable holds the location of our file which is relative to our server. You can also specify the absolute URL if you want to. fileName variable holds the “My Document” string which represents our download file name.
We are making fetch request and providing url as a parameter.
We are calling the blob() method on the res to get the Blob object.
saveAs() method is part of FileSaver.js and we are calling this method by passing blob and fileName as parameters. As soon as this function executes, our download will start right away.

let btnDownload = document.querySelector("button");

btnDownload.addEventListener("click", startDownload);

async function startDownload() {
  let url = "test.pdf";
  let fileName = "My Document";
  const res = await fetch(url);
  const blob = await res.blob();
  saveAs(blob, fileName);
}

Download PDF File Using Anchor Tag

Download PDF File on Button Click

You May Also Like: