当点击HTML按钮或JavaScript时，如何触发文件下载

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

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

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

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

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

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

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

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

当前回答

你可以用隐形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";
}

其他回答

对于按钮可以这样做

<form method="get" action="file.doc">
   <button type="submit">Download!</button>
</form>

这是最终为我工作，因为要下载的文件是在页面加载时确定的。

JS来更新表单的action属性:

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

调用JS来更新表单的action属性:

<body onLoad="setFormAction();">

表单标签与提交按钮:

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

以下是没有工作:

<form method="get" id="myDownloadButtonForm" action="javascript:someFunctionToReturnFileName();">

它也非常安静，没有闪烁的新窗口/标签时使用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 " > < >按钮下载!< /按钮> < / > 这将下载文件作为。doc文件扩展名不支持在浏览器中打开。其中一个最简单的方法按钮和文字装饰将有助于改变或删除链接的文字装饰。

是什么:

<input type="button" value="Download Now!" onclick="window.location = 'file.doc';">

推荐文章