这很疯狂,但我不知道怎么做,因为这些词太常见了,在搜索引擎上很难找到我需要的东西。我想这个问题应该很容易回答。

我想要一个简单的文件下载,这将与此相同:

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

但是我想使用一个HTML按钮,例如:

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

同样,是否有可能通过JavaScript触发一个简单的下载?

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

我绝对不会寻找一种方法来创建一个看起来像按钮的锚,使用任何后端脚本,或混乱的服务器头或mime类型。


当前回答

jQuery:

$("#fileRequest").click(function() {
    // hope the server sets Content-Disposition: attachment!
    window.location = 'file.doc';
});

其他回答

你可以用隐形iframe的“trick”来实现。当你将“src”设置为它时,浏览器的反应就像你点击了一个具有相同“href”的链接。与表单解决方案相反,它允许您嵌入额外的逻辑,例如在超时后激活下载,当某些条件满足时等等。

它也非常安静,没有闪烁的新窗口/标签时使用window.open。

HTML:

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

Javascript:

function download() {
    var iframe = document.getElementById('invisible');
    iframe.src = "file.doc";
}

对我来说,点击按钮而不是锚文本工作得很好。

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

在大多数规则下,这可能是不合适的,但它看起来相当不错。

jQuery:

$("#fileRequest").click(function() {
    // hope the server sets Content-Disposition: attachment!
    window.location = 'file.doc';
});

如果你不能使用表单,另一种方法downloadjs很适合。Downloadjs在底层使用blob和html 5文件API:

<div onClick=(()=>{downloadjs(url, filename)})/>

*它是jsx/react语法,但可以在纯HTML中使用

如果你正在寻找一个普通的JavaScript(而不是jQuery)解决方案,并且不使用HTML5属性,你可以试试这个。

const download = document.getElementById("fileRequest"); 下载。addEventListener(“点击”,请求); 函数请求(){ 窗口。Location = 'document.docx'; } .dwnld-cta { 边框半径:15px 15px; 宽度:100 px; 行高:22 px } 下载文件< h1 > < / h1 > <button id="fileRequest" class="dwnld-cta">Download</button> .