首页 文章

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

提问于
浏览 次
318

这很疯狂，但我不知道如何做到这一点，而且由于这些词有多常见，很难在搜索引擎上找到我需要的东西 . 我认为这应该很容易回答 .

我想要一个简单的文件下载，它会像这样做：

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

但我想使用HTML按钮，例如其中任何一个：

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

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

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

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

javascript html download

18 回答

  • 1

    对于你可以做的按钮

    <form method="get" action="file.doc">
   <button type="submit">Download!</button>
</form>
    回复于
  • 342

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

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

    我讨厌我的Javascript生成CSV文件的情况 . 由于没有可下载的远程URL，我使用以下实现 .

    downloadCSV: function(data){
    var MIME_TYPE = "text/csv";

    var blob = new Blob([data], {type: MIME_TYPE});
    window.location.href = window.URL.createObjectURL(blob);
}
    回复于
  • 21

    你可以使用隐形iframe的“技巧”来做到这一点 . 当您为其设置“src”时，浏览器会做出反应，就像您单击具有相同“href”的链接一样 . 与表单解决方案相反，它使您能够嵌入其他逻辑，例如在超时后激活下载，满足某些条件等 .

    它也很简单，没有像使用 window.open 时那样闪烁的新窗口/标签 .

    HTML：

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

    使用Javascript：

    function download() {
    var iframe = document.getElementById('invisible');
    iframe.src = "file.doc";
}
    回复于
  • 60

    您可以隐藏下载链接并使按钮单击它 .

    <button onclick="document.getElementById('link').click()">Download!</button>
<a id="link" href="file.doc" download hidden></a>
    回复于
  • 1

    我做了一些研究，找到了最好的答案 . 您可以使用新的HTML5 download 属性触发下载 .

    <a href="path_to_file" download="proposed_file_name">Download</a>

    地点：

    • path_to_file 是绝对路径或相对路径，

    • proposed_file_name 要保存的文件名（可以为空，则默认为实际文件名） .

    希望这有用 .

    Whatwg Documentation

    Caniuse

    回复于
  • 5

    HTML：

    <button type="submit" onclick="window.open('file.doc')">Download!</button>
    回复于
  • 227

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

    let a = document.createElement('a')
a.href = item.url
a.download = item.url.split('/').pop()
a.click()
    回复于
  • 7

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

    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>

    以下做了 NOT 工作：

    <form method="get" id="myDownloadButtonForm" action="javascript:someFunctionToReturnFileName();">
    回复于
  • 56

    对我而言，按钮而不是锚文本的效果非常好 .

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

    大多数规则可能都不行，但它看起来还不错 .

    回复于
  • 6

    关于什么：

    <input type="button" value="Download Now!" onclick="window.location = 'file.doc';">
    回复于
  • 1

    如果你不能使用表格，那么downloadjs的另一种方法很合适 . Downloadjs使用blob和html 5文件API：

    {downloadjs（url，filename）}）/>

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

    回复于
  • 0

    Bootstrap Version

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

    记录了in Bootstrap 4 docs，并且也在Bootstrap 3中工作 .

    回复于
  • -3

    使用jQuery：

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

    在 <body> 和 </body> 标签之间的任何位置，使用以下代码放入按钮：

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

    这肯定有效！

    回复于
  • 4

    如果你使用 <a> 标签，不要忘记使用通往文件的整个网址 - 即：

    <a href="http://www.example.com/folder1/file.doc">Download</a>
    回复于
  • 0

    如果您正在寻找一个vanilla JavaScript（没有jQuery）解决方案而且没有使用HTML5属性，那么您可以试试这个 .

    const download = document.getElementById("fileRequest");

download.addEventListener('click', request);

function request() {
    window.location = 'document.docx';
}

    .dwnld-cta {
    border-radius: 15px 15px;
    width: 100px;
    line-height: 22px
}

    <h1>Download File</h1>
<button id="fileRequest" class="dwnld-cta">Download</button>
    回复于
  • 1
    <a href="complexDownload" download="file.doc" onclick="this.href='file.doc';">
     <button>Download <i>File.doc</i> Now!</button>
 </a>

    它似乎不适用于Safari，但它确实在Chrome中有效 . 此外，一旦用户点击它，更改链接的href属性似乎使其在旧版本的IE中工作，但在最新版本的IE或Edge中不起作用 .

    回复于
  • 9

    如果您有一个复杂的URL（例如 file.doc?foo=bar&jon=doe ），另一种方法是在表单中添加隐藏字段

    <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的答案是不完整的

    回复于

相关问题