(HTML) Download a PDF file instead of opening them in browser when clicked

I was wondering how to make a PDF file link downloadable instead of opening them in the browser? How is this done in html? (I'd assume it's done via javascript or something).

5,072 1 1 gold badge 27 27 silver badges 39 39 bronze badges asked Jul 22, 2011 at 18:09 1,683 3 3 gold badges 15 15 silver badges 11 11 bronze badges

This is to my knowledge not scriptable behavior. Most browsers will have their own settings for the behavior of what to do with specific file types on download.

Commented Jul 22, 2011 at 18:13 As of HTML5, the OP should update the correct answer to Sarim's answer. Commented Sep 18, 2013 at 7:32 possible duplicate of Force to open "Save As. " popup open at text link click for pdf in HTML Commented Nov 6, 2014 at 22:33 This question has also been answered here: stackoverflow.com/a/30714824/847235 Commented Jun 10, 2015 at 16:31

16 Answers 16

With html5, it is possible now. Set a "download" attr in element.

answered Sep 7, 2013 at 15:15 3,199 2 2 gold badges 22 22 silver badges 20 20 bronze badges

You better go with this solution if it's supported. Here's a way to check if it is if ("download" in document.createElement("a")) < . >

Commented Dec 13, 2015 at 2:30

i added another answer below (bad hack though), while this is still the preferred way, perhaps the hack way could be offered for unsupported browsers.

Commented Jan 11, 2016 at 19:51

Is there a way one can specify the text for the pdf instead of mentioning file path? I need to create pdf from a div html but I don't wish to open another window,download should be seemless like in this answer..

Commented Oct 24, 2016 at 11:53

As right now August 2019, Browser support seems to be enhanced for this feature, see: w3schools.com/tags/att_a_download.asp

– user6057915 Commented Aug 24, 2019 at 21:51 Note that the download attribute is only supported for same-origin requests. Commented May 4, 2020 at 17:29

This is only possible with setting a http response header by the server side code. Namely;

Content-Disposition: attachment; filename=fname.ext
answered Jul 22, 2011 at 18:15 Yiğit Yener Yiğit Yener 5,936 1 1 gold badge 24 24 silver badges 26 26 bronze badges this is the perfect answer - just find the way to do it in the appropriate server-side language. Commented Jul 25, 2012 at 21:34 Apache example. Flask example. Commented Apr 3, 2018 at 13:57

Unfortunately iOS will still preview and not download pdf files even if the content disposition is 'attachment'.

Commented May 6, 2019 at 14:47 Currently is doesn't work. File is opened anyway. Commented Dec 14, 2021 at 14:07

There is now the HTML 5 download attribute that can handle this.

I agree, and think Sarim's answer is good (it probably should be the chosen answer if the OP ever returns). However, this answer is still the reliable way to handle it (as Yiğit Yener's answer points out and--oddly--people agree with). While the download attribute has gained support, it's still spotty:

21.1k 74 74 gold badges 79 79 silver badges 105 105 bronze badges answered Jul 22, 2011 at 18:24 40.6k 50 50 gold badges 157 157 silver badges 216 216 bronze badges

you will need to use a PHP script (or an other server side language for this)

and use httacces to redirect (rewrite) to the PHP file instead of the pdf

answered Jul 22, 2011 at 18:15 beardhatcode beardhatcode 4,733 1 1 gold badge 17 17 silver badges 30 30 bronze badges

Hmm, it works great when I open the php file directly. But when I try to use redirection, like here: Redirect 301 /_PDFs/Catalogue.pdf http://www.example.com/_PDFs/___download_the_catalogue_instead_opening.php and try to open the pdf file, it still opens the original in the browser, instead downloading the renamed version.

Commented Jul 14, 2015 at 9:58

UPDATE: It works when there is no file that is being directly called (as "Catalogue.pdf" in my example). Then the redirection works perfectly. Thanks!

Commented Jul 14, 2015 at 10:16 
Response.AddHeader("Content-disposition", "attachment; filename http://www.codeproject.com/KB/aspnet/textfile.aspx">http://www.codeproject.com/KB/aspnet/textfile.aspx
This goes for ASP.NET. I am sure you can find similar solutions in all other server side languages. However there's no javascript solution to the best of my knowledge.
)" data-controller="se-share-sheet" data-se-share-sheet-title="Share a link to this answer" data-se-share-sheet-subtitle="" data-se-share-sheet-post-type="answer" data-se-share-sheet-social="facebook twitter devto" data-se-share-sheet-location="2" data-se-share-sheet-license-url="https%3a%2f%2fcreativecommons.org%2flicenses%2fby-sa%2f3.0%2f" data-se-share-sheet-license-name="CC BY-SA 3.0" data-s-popover-placement="bottom-start">Share
)" title="">Improve this answer
answered Jul 22, 2011 at 18:17
 
1
    this is the answer ( as well as the related one for PHP). the point is that the http response header has to be edited.
    – user158017
    CommentedJul 25, 2012 at 21:34
     



Add a comment|
8
When you want to direct download any image or pdf file from browser instead on opening it in new tab then in javascript you should set value to download attribute of create dynamic link
var path= "your file path will be here"; var save = document.createElement('a'); save.href = filePath; save.download = "Your file name here"; save.target = '_blank'; var event = document.createEvent('Event'); event.initEvent('click', true, true); save.dispatchEvent(event); (window.URL || window.webkitURL).revokeObjectURL(save.href);


For new Chrome update some time event is not working. for that following code will be use


 var path= "your file path will be here"; var save = document.createElement('a'); save.href = filePath; save.download = "Your file name here"; save.target = '_blank'; document.body.appendChild(save); save.click(); document.body.removeChild(save); 


Appending child and removing child is useful for Firefox, Internet explorer browser only. On chrome it will work without appending and removing child