38
 <a href="sample.pdf" target="_blank">Download</a>

If I click Download button, this target blank is opening a new window.

But I need it to prompt a dialog for saving this file. How can I achieve this? enter image description here

Chris Wesseling
  • 6,226
  • 2
  • 36
  • 72
UI_Dev
  • 3,317
  • 16
  • 46
  • 92

2 Answers2

60

This is something that you cannot absolutely control with HTML itself.

If the user is having a browser with PDF reading capabilities (or a plugin) and the corresponding settings to open PDF files in-browser, the PDF will open like that.

The PDF opens in a new tab simple because of your target="_blank", which has nothing to do with a download prompt.

If you are using HTML5 you can use the download attribute:

<a href="sample.pdf" download="sample.pdf">Download</a>

If you have a back-end service which you can control or you feel like fiddling with your Web Server, you can always look for setting the right Content-Disposition. See this SO question for some nice discussion on Content-Disposition.

Community
  • 1
  • 1
Kostas Rousis
  • 5,918
  • 1
  • 33
  • 38
  • 3
    If only HTML5 is used I agree with this answer, +1. Though, Here's the [**compatibility table**](http://caniuse.com/#search=download%20attribute) of download attribute. This must be known. – Kevin Cittadini May 23 '14 at 09:46
  • Absolutely, that's why I started with the long answer and only at the end mentioned the HTML5 feature :) Thanks for the compatibility link – Kostas Rousis May 23 '14 at 09:48
  • Yep, and you did well. It'll be better to use a server-side language that forces download. But this is up to the OP – Kevin Cittadini May 23 '14 at 09:49
  • 2
    HTML 5 download attribute did this ..thank you – UI_Dev May 23 '14 at 10:03
  • -1, this answer is a duplicate of http://stackoverflow.com/a/8613899/383793 – Chris Wesseling May 23 '14 at 10:07
  • 1
    There is nothing wrong with the correctness of the answer. It is just not useful. Flagging it a duplicate will a) provide OP with the answer he/she needs and b) educate him/her to search SO before posting to SO. The fact that you find it cumbersome to wade through all possible duplicates only illustrates my point, there is no need for yet another duplicate that *adds* to the pile of possible duplicates. – Chris Wesseling May 23 '14 at 10:17
  • [We're not alone](http://meta.stackoverflow.com/a/252077/383793) in our different points of view. ;-) – Chris Wesseling May 23 '14 at 10:22
  • 3
    Doesn't work for me in Safari 8.0 on OS X 10.10. – tmuecksch Oct 20 '14 at 09:47
  • 2
    @ChrisWesseling down voting the answer because the question is a dupe sounds ridiculous, why does that have anything to do with the answerer? It'd be one thing if he copied an answer *on the same question*, but this is not that case. Actually this post comes up first on Google AND has more up votes (by an order of magnitude) than the one you linked to. Down voting is not a mechanism for "flagging as a duplicate", it's a mechanism for down voting. – Brian Leishman May 15 '19 at 16:39
  • What about .svg file? download attribute downloads .svg image and also displays in browser window. – Mik Abe Jun 12 '21 at 08:07
  • @mabesadze, if you still haven't had your answer: yes, you can do it with absolutely anything, including SVG and even HTML pages. – SteeveDroz Apr 04 '22 at 05:55
1

Modern browsers open known types such as jpg, pdf, etc. instead of downloading. Here is the way how I overcome this issue. Firstly fetched the entire blob with javascript and served it as a blob to user.

async function download(dataurl, fileName) {
    const response = await fetch(dataurl);
    const blob = await response.blob();

    const link = document.createElement("a");
    link.href = URL.createObjectURL(blob);
    link.download = fileName;
    link.click();
}
enisn
  • 625
  • 7
  • 14