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. This solution works on Chrome, Safari, Firefox, Opera, IE11 and Edge.In case you specify a file name, then the downloaded file will be saved with that name. This blob object can be use to create an objectURL, which can then be used as href in a link. In essence the Fetch API fetch() method returns a response, from which a blob can be created. To solve this it was necessary to download the file to memory with an XHR request and then get the browser to open or download it with whatever plugin/UI it normally uses for pdf file.įor the XHR request we use the Fetch API with the whatwg-fetch polyfill. In this case however the API was designed for native mobile apps and required the presence of a custom ‘api-key’ http-header, which made it impossible to just provide the url to the browser. Normally, the API would provide a json-object with a link to the pdf, which can then be used to open a new browser tab/window and the browser or platform takes care of the rest. On my most recent assignment I was faced with the challenge of downloading a pdf file from an API and displaying it in the browser.

Javascript download pdf file from url