How to trigger a file download when clicking an HT

2018-12-31 15:15发布

站内问答 / JavaScript
1251 18 6

This is crazy but I don't know how to do this, and because of how common the words are, it's hard to find what I need on search engines. I'm thinking this should be an easy one to answer.

I want a simple file download, that would do the same as this:

<a href="file.doc">Download!</a>

But I want to use an HTML button, e.g. either of these:

<input type="button" value="Download!">
<button>Download!</button>

Likewise, is it possible to trigger a simple download via JavaScript?

$("#fileRequest").click(function(){ /* code to download? */ });

I'm definitely not looking for a way to create an anchor that looks like a button, use any back-end scripts, or mess with server headers or mime types.

18条回答
弹指情弦暗扣
2楼-- · 2018-12-31 15:43

You can do it with "trick" with invisible iframe. When you set "src" to it, browser reacts as if you would click a link with the same "href". As opposite to solution with form, it enables you to embed additional logic, for example activating download after timeout, when some conditions are met etc.

It is also very silient, there's no blinking new window/tab like when using window.open.

HTML:

<iframe id="invisible" style="display:none;"></iframe>

Javascript:

function download() {
    var iframe = document.getElementById('invisible');
    iframe.src = "file.doc";
}
查看更多
0人赞 添加讨论(0) 举报
妖精总统
3楼-- · 2018-12-31 15:43

This is what finally worked for me since the file to be downloaded was determined when the page is loaded.

JS to update the form's action attribute:

function setFormAction() {
    document.getElementById("myDownloadButtonForm").action = //some code to get the filename;
}

Calling JS to update the form's action attribute:

<body onLoad="setFormAction();">

Form tag with the submit button:

<form method="get" id="myDownloadButtonForm" action="">
    Click to open document:  
    <button type="submit">Open Document</button>
</form>

The following did NOT work:

<form method="get" id="myDownloadButtonForm" action="javascript:someFunctionToReturnFileName();">
查看更多
0人赞 添加讨论(0) 举报
浪荡孟婆
4楼-- · 2018-12-31 15:45

Old thread but it's missing a simple js solution:

let a = document.createElement('a')
a.href = item.url
a.download = item.url.split('/').pop()
a.click()
查看更多
0人赞 添加讨论(0) 举报
怪性笑人.
5楼-- · 2018-12-31 15:46 
 <a href="complexDownload" download="file.doc" onclick="this.href='file.doc';">
     <button>Download <i>File.doc</i> Now!</button>
 </a>

It doesn't seem to work in Safari, but it did work in Chrome. Also, changing the href attribute of the link once the user clicked it seemed to make it work in older versions of IE, but not in the latest versions of IE or Edge.

查看更多
0人赞 添加讨论(0) 举报
冷夜・残月
6楼-- · 2018-12-31 15:46

Anywhere between your <body> and </body> tags, put in a button using the below code:

<button>
    <a href="file.doc" download>Click to Download!</a>
</button>

This is sure to work!

查看更多
0人赞 添加讨论(0) 举报
忆尘夕之涩
7楼-- · 2018-12-31 15:47

If you can't use form, another approach with downloadjs fit nice. Downloadjs use blob and html 5 file API under the hood:

{downloadjs(url, filename)})/>

*it's jsx/react syntax, but can be used in pure html

查看更多
0人赞 添加讨论(0) 举报
1 2 3 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)