This can be achieved easily with the help of fetch API and FileSaver.js library. We need some mechanism to send a request to an absolute or relative URL and start the download.

As soon as a user clicks on the anchor element, the download will start and the pdf file will be saved as “MyDocument.pdf”.ĭownloading a pdf file on a button click requires a bit of extra work.

Anchor element also has download attribute and we have provided download file name as “My Document”.

Anchor element has href attribute and it indicates the location of the file on our server.

We have added a CDN link of FileSaver.js as well as our javascript file script.js with a script tag at the bottom.

We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.

The inner text for the anchor element is “Click Here” and the button element is “Download PDF”.

The div element is just a wrapper for the rest of the elements.

We have 3 elements in the HTML file ( div, a, and button).

Please have a look over the code example and steps given below. This file is locally stored on our server. In the following example, we have one anchor element and upon click, we want to download the test.pdf file. If you leave it as it is, then it will auto pick the file name from the value of the href attribute. In case you specify a file name, then the downloaded file will be saved with that name.

Javascript download file from url