Question

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

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

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

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

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

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

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

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

Answer 1

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

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

其中：

path_to_file是绝对路径或相对路径，
proposed_file_name要保存的文件名（可以为空，则默认为实际文件名）。

希望这有用。

Whatwg Documentation

Caniuse

Answer 2

对于您可以执行的按钮

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

Answer 3

使用jQuery：

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

Answer 4

HTML：

<button type="submit" onclick="window.open('file.doc')">Download!</button>

Answer 5

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

Answer 6

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

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)

Answer 7

Bootstrap版本

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

记录in Bootstrap 4 docs，也可以在Bootstrap 3中使用。

Answer 8

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

<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);
}

Answer 9

怎么样：

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

Answer 10

您可以隐藏下载链接并单击该按钮。

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

Answer 11

如果您正在寻找一个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>

Answer 12

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

{downloadjs（url，filename）}）/＆gt;

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

Answer 13

 <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中不起作用。

Answer 14

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

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

这肯定有用！

Answer 15

这最终对我有用，因为在加载页面时确定要下载的文件。

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();">

Answer 16

如果你有一个复杂的网址，例如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答案，该答案不完整

Answer 17

下载属性可以做到

 <a class="btn btn-success btn-sm" href="/file_path/file.type" download>
     <span>download </span>&nbsp;<i class="fa fa-download"></i>
 </a>

Answer 18

您可以简单地使用：

<form action="/file.doc" align="center"> <input type="submit" id="custom-buttons" value="Click Here To Download" /> </form>

Answer 19

您可以添加不带任何文本但带有链接的标签。然后，就像在代码中一样单击按钮时，只需运行$（“ yourlinkclass”）。click（）函数。

Answer 20

加载文件和下载文件是有区别的。以下html代码加载文件：

<a href="http://www.fbi.gov/top-secret.pdf">loading on the same tab</a>

单击此链接后，当前选项卡将替换为pdf文件，然后可以下载该文件。右键单击此链接，您可以选择菜单项另存为，以直接下载文件。如果您希望在单击此类链接时获得一个另存为对话框，则可能需要采用以下代码：

<a href="http://www.fbi.gov/top-secret.pdf?download=1">save as...</a>

如果您选择在选项中使用下载目录，则浏览器将立即下载此文件。否则，您的浏览器将提供另存为对话框。

您还可以选择一个下载按钮：

<button type="submit" onclick="window.open('http://www.fbi.gov/top-secret.pdf?download=1')">
    save as...
</button>

如果您希望将链接加载到新标签上，则选择

<a href="http://www.fbi.gov/top-secret.pdf" target="_blank">loading on a new tab</a>

表单元素不遵守指令？download = 1 。它只注意指令 target =“ _ blank” ：

<form method="get" action="http://www.fbi.gov/top-secret.pdf" target="_blank">
    <button type="submit">loading on a new tab</button>
</form>

Answer 21

我想出的解决方案是，您可以在锚标记中使用download属性，但是仅当您的html文件位于服务器上时，该属性才有效。但是您可能会遇到这样的问题，例如在设计一个简单的html页面时，我们如何才能检查您是否可以使用VS代码实时服务器或方括号实时服务器，并且您会看到您的download属性会起作用，但是如果您尝试通过以下方式直接打开它只需双击html页面即可打开文件而不是下载文件。结论：仅当您的html文件不是服务器时，锚标签中的属性下载才有效。

Answer 22

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

按钮和 text-decoration 的最简单方法之一将有助于更改或删除链接的文本修饰。

Answer 23

在我的测试中，只要您使用相对链接，以下内容适用于所有文件类型和浏览器：

<a href="/assets/hello.txt" download="my_file.txt"><button>Download 2</button></a>

/assets/hello.txt 只是我网站上的相对路径。将其更改为您自己的相对路径。
my_file.txt 是您希望文件在下载时调用的名称。

说明

我注意到很多答案下都有评论说浏览器只会尝试打开文件本身而不是根据文件类型下载它。我发现这是真的。

我制作了两个按钮来使用两种不同的方法进行测试：

<button onclick="window.location.href='/assets/hello.txt';">Download 1</button>

<a href="/assets/hello.txt" download="my_file.txt"><button>Download 2</button></a>

注意事项：

按钮 1 在新的浏览器选项卡中打开了文本文件。但是，按钮 1 会下载无法自行打开的文件类型的文件（例如，.apk 文件）。
按钮 2 下载了文本文件。但是，按钮 2 仅在路径是相对的情况下才下载文件。当我将路径更改为绝对路径时，浏览器会在新选项卡中打开它。

我在 Firefox、Safari 和 Chrome 上对此进行了测试。

Answer 24

您好，我只包含“下载”这个词，效果很好。

<img src="{{ asset('/relative/path/to/image.jpg') | imagine_filter('my_thumb') }}" />

因此在 javascript 中，您可以使用以下内容：

<picture>
  <source srcset="{{ asset'/path/to/image.png') | imagine_filter('my_thumbnail_webp') }}" type="image/webp">
  <source srcset="{{ asset('/path/to/image.png') | imagine_filter('my_thumbnail') }}" type="image/png"> 
  <img src="{{ asset('/path/to/image.png') | imagine_filter('my_thumbnail') }}">
</picture>

Answer 25

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

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

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

Answer 26

如果您使用<a>标记，请不要忘记使用指向该文件的整个网址 - 即：

<a href="http://www.example.com/folder1/file.doc">Download</a>

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

26 个答案:

说明