单击HTML按钮或JavaScript时如何触发文件下载


How to trigger a file download when clicking an HTML button or JavaScript

这很疯狂，但我不知道该怎么做，而且由于这些词的常见性，很难在搜索引擎上找到我需要的东西。我认为这应该是一个简单的答案。

我想要一个简单的文件下载，它可以做同样的事情：

1
Download!

但我想使用HTML按钮，例如：

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

同样，是否可以通过javascript触发简单的下载？

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

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

相关讨论

我已经做了一些研究和发现的最好的答案。你可以下载使用A触发新的HTML5 download属性。

1
Download

WHERE：

  • path_to_file绝对或相对路径是可能的，
  • 在proposed_file_namefilename to save to(可以是空白，则缺省为"实际文件名)。

希望这是有益的。

Web文档

caniuse

相关讨论

你可以做的按钮

1
2
3
<form method="get" action="file.doc">
   <button type="submit">Download!</button>
</form>
相关讨论

一个jQuery的：

1
2
3
4
$("#fileRequest").click(function() {
    // // hope the server sets Content-Disposition: attachment!
    window.location = 'file.doc';
});
相关讨论

HTML：

1
<button type="submit" onclick="window.open('file.doc')">Download!</button>
相关讨论

你可以做一个无形的iframe的"把戏"。当你设置"src"到它，如果你想reacts浏览器点击链接在同一"href"。作为一个解决方案的形式，相反，它使你嵌入额外的逻辑，例如，当激活后，下载一个超时时间，气象条件等。

因此，它是非常沉默，没有闪烁的新窗口/标签window.open样时使用。

HTML：

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

JavaScript的：

1
2
3
4
function download() {
    var iframe = document.getElementById('invisible');
    iframe.src ="file.doc";
}
相关讨论

老线程，但它缺少一个简单的解决方案：JS

1
2
3
4
5
6
let a = document.createElement('a')
a.href = item.url
a.download = item.url.split('/').pop()
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
相关讨论

自举版本

1
2
3
<a class="btn btn-danger" role="button" href="path_to_file"
   download="proposed_file_name">
  Download

记录在引导文件和引导4，作品3为好。

相关讨论

我认为这是你正在寻找的解决方案

1
<button type="submit" onclick="window.location.href='file.doc'">Download!</button>

我在我的JavaScript生成的哈得a Case A CSV文件。由于没有远程URL下载，我使用下面的实现。

1
2
3
4
5
6
downloadCSV: function(data){
    var MIME_TYPE ="text/csv";

    var blob = new Blob([data], {type: MIME_TYPE});
    window.location.href = window.URL.createObjectURL(blob);
}
相关讨论

什么：

1
<input type="button" value="Download Now!" onclick="window.location = 'file.doc';">
相关讨论

你可以下载隐藏的链接和按钮，点击它使。

1
<button onclick="document.getElementById('link').click()">Download!</button>
相关讨论

如果你寻找一个基本的解决方案(NO的jQuery JavaScript和HTML5的)不使用属性，你可以试试这个。

1
2
3
4
5
6
7
const download = document.getElementById("fileRequest");

download.addEventListener('click', request);

function request() {
    window.location = 'document.docx';
}
1
2
3
4
5
.dwnld-cta {
    border-radius: 15px 15px;
    width: 100px;
    line-height: 22px
}
1
2
Download File
<button id="fileRequest" class="dwnld-cta">Download</button>

这是我最后一个为我工作的，自文件下载页面加载时，什么是确定的。

js更新形式的行动属性：

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

调用js更新形式的行动属性：

1
<body onloadx="setFormAction();">

一天一个提交按钮的形式：

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

我需要以下工作：

1
<form method="get" id="myDownloadButtonForm" action="javascript:someFunctionToReturnFileName();">
相关讨论

1
     <button>Download File.doc Now!</button>

它似乎没有工作，但它没有在Safari和Chrome。因此，改变链接的href属性的用户一旦点击它，让它出现在旧IE工作，但不是在IE的最新版本(或边缘。

相关讨论

如果你不能使用一个合适的形状，downloadjs方法好。downloadjs BLOB文件API使用HTML 5和下罩：

downloadjs(URL，文件名){ })／＞

这语法JSX /反应，但可以用纯HTML

相关讨论

在你的Anywhere和标签按钮，在使用下面的代码：

1
2
3
<button>
    Click to Download!
</button>

这是要工作！

相关讨论

你可以简单的使用：


在另一个实例的方式做你有一个复杂的URL，如file.doc?foo=bar&jon=doe是添加在隐场形式

1
2
3
4
5
<form method="get" action="file.doc">
  <input ty='hidden' name='foo' value='bar'/>
  <input ty='hidden' name='john' value='doe'/>
  <button type="submit">Download Now</button>
</form>

在回答"cfreak灵感是需要完整的

做下载属性

1
     <span>download </span>&nbsp;<i class="fa fa-download">

我ading按钮锚文本不是真的好作品。

1
<button>Download!</button>

它不可能是最好的规则，但它看起来不错。

相关讨论

如果你使用天，不要忘记使用它导致整个URL的文件，即：

1
Download
相关讨论