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

434

这太疯狂了，但是我不知道该怎么做，而且由于这些单词很常见，因此很难在搜索引擎上找到我需要的东西。我认为这应该很容易回答。

我想要一个简单的文件下载，该操作与此相同：

<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

— 布伦司汀
source

15

多亏您“如何在javascript中触发文件下载”，才能为以后的搜索者提供更快的答案。

— Danubian Sailor'Mar

278

对于按钮，您可以执行

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

— Cfreak
source

您可以保存表单标签，只需将onclick添加到按钮标签即可。

— Florian Leitgeb，2015年

12

不能用作触发器，只需将其重定向为url作为“ a”标签即可。

— fdrv

7

效果更好：<a href="path_to_file" download="proposed_file_name">下载</a>

— kscius

11

直到今天，@ kscius仍未在IE 11中支持下载属性（Edge现在支持该属性），而Safari也不支持该属性。在2012年最初发布答案时，任何主流浏览器均不支持该答案。

— Cfreak '16

1

使用按钮样式的锚点和使用按钮的表单之间有什么区别？

— 安德烈·伊普

444

您可以使用HTML5 download属性触发下载。

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

哪里：

path_to_file是路径解析为URL 的同根同源。这意味着页面和文件必须共享相同的域，子域，协议（HTTP与HTTPS）和端口（如果指定）。例外是blob:and data:（始终有效）和and file:（永远无效）。
proposed_file_name是要保存到的文件名。如果为空，则浏览器默认为文件名。

文档：MDN，HTML标准上下载，HTML标准上download，CanIUse

— 乔·皮格特（Joe Pigott）
source

37

不适用于Safari和某些IE版本

— Mohamed Hussain

4

使用的组合download，并target="_blank"似乎足以应付大多数使用情况。了解download该内容的浏览器会将其视为下载内容，否则将在新标签页中将其打开。

— MK10

10

如何将其应用于按钮对象而不只是标签？

— storm_m2138 '17

8

实际上，这仅适用于与MDN文档中提到的来源相同的网址。如果我们正在寻求开发通用解决方案，这将是一个巨大的局限

— Akshat Gupta

6

问题是明确要求使用按钮而不是链接

— Quentin

86

HTML：

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

— 睡
source

8

最好，最干净的解决方案。但是您在这里不需要任何额外的Javascript。带有onclick的HTML部分就足够了。

— Florian Leitgeb，2015年

4

如果我想下载xml文件怎么办？

— g07kore 2015年

2

感谢您的代码。我已经测试过，它可以在IE，Chrome，Firefox中运行。

— muthukumar

6

如果您拥有浏览器可接受的文件（如PDF），它将在新标签页中打开，而不是显示下载对话框。

— WindRider

1

window.open可以触发浏览器中的弹出窗口阻止，因此不建议这样做。您可以使用window.location ='path'，尽管这将转到同一浏览器窗口中的位置。

— Elendurwen

68

使用jQuery：

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

— 马特·鲍尔
source

1

很好，谢谢。您是否知道大多数服务器是否默认将Content-Disposition设置为“ attachment”？

— brentonstrine 2012年

5

没有“最”。这完全取决于。不要依赖它的设置。

— 马特·鲍尔

3

这个问题一直困扰着我，这是唯一可行的方法（并受IE支持）。我将为任何像我这样的n00b添加设置Content-Disposition的方法，您要做的就是：<？php header（'Content-Disposition：attachment; filename =“ filename.here”'）; ？>

— user124384

3

没有jquery。期。

— 亚当·阿罗德

1

如果您尝试下载图像，则此方法不起作用，它将在浏览器中打开图像

— Dheeraj

34

旧线程，但缺少一个简单的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)

— Stefanos Chrs
source

24

@NicholasKyriakides有点让我想起了这颗宝石：image.ibb.co/dtkUWJ/Selection_002.png

— Stefanos Chrs，

@BryanLarsen FF的哪个版本？

— Stefanos Chrs '19

1

@BryanLarsen是的，Firefox不允许在未先将元素添加到正文的情况下使用此功能。谢谢您更新答案

— Stefanos Chrs

1

下载完成后，是否可以触发javascript函数？下载开始后仅尝试显示一条消息，下载完成后将其删除。

— mohit bansal

1

@mohitbansal（un）很遗憾，它

— 不在

23

您可以使用带有不可见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";
}

— 达努比亚水手
source

至少在您将iframe实际应用到document.body时，它才起作用。

— yxhuvud

1

尽管以前可以使用，但目前似乎无法在Chrome中使用。我想知道它是否会间歇性地停止在不同版本的Chrome中运行。

— Dobes Vandermeer

从61.0.3163.100版（正式版本）（64位）开始在Chrome中运行

— AndrewBenjamin

不适用于Firefox v57中的图像。它只是在iframe中渲染图像。

— 安东尼

15

引导版本

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

记录在Bootstrap 4文档中，也可以在Bootstrap 3中使用。

— CFP支持
source

9

与Bootstrap唯一相关的是类名，它只是HTML5的强大功能。

— 马查多

3

问题是明确询问如何使用按钮而不是链接来执行此操作。

— 昆汀

2

如果您完全不了解引导程序，则会看到它是一个按钮。

— 约翰·洛德

11

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

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

— 德尔科尼斯
source

在404->页面上更改为404错误页面。与其他location.href解决方案中所述的问题相同。

— BananaAcid

9

关于什么：

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

— 奥利
source

5

例如，如果您的文件是图像，这将不起作用，因为它将在浏览器中打开。

— 剑圣'18

发生另一个问题是，如果文件丢失，它将整个页面导航到404页面

— Hugheth '18

7

您可以隐藏下载链接，然后单击按钮。

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

— 星际大战
source

为了使它在Firefox中起作用，资源必须与文档位于同一域中。设置CORS标头没有帮助。

— 安东尼

2

永远不要这样做

— Wannes

@Wannes为什么不呢？

— Starwarswii19年

4

如果您正在寻找普通的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>

展开摘要

— 大卫·威利特
source

1

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

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

— Slayernoah
source

可能是因为，如果在加载时有文件，您是否不能仅使用模板引擎在服务器上呈现操作？为什么需要js代码？

— 安德烈·伊普

1

如果您不能使用表单，则使用downloadjs的另一种方法非常合适。downloadjs在后台使用blob和html 5文件API：

{downloadjs（URL，文件名）}）/>

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

— 格列布·多尔齐科夫（Gleb Dolzikov）
source

为避免其他域上的图像出现CORS问题，请将crossorigin =“ anonymous”放入img标签，如下所示：<img src =“ image.png” crossorigin =“ anonymous” />

— Jonathan Harris

0

使用<body>和</body>标记之间的任意位置，使用以下代码放置一个按钮：

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

这肯定可以工作！

— 罗纳尔多
source

1

对于Chrome来说，这是一个很好的解决方案

— Hayk Aramyan

1

在Safari中也不起作用：W3学校

— 亚历克斯（Alex）

2

在MS浏览器中无法正常工作是一个很大的问题，Chrome不一定总能解决问题。

— SudoKid

您不能在HTML中的按钮内放置链接

— Quentin

0

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

<form method="get" action="file.doc">
  <input type="hidden" name="foo" value="bar" />
  <input type="hidden" name="john" value="doe" />
  <button type="submit">Download Now</button>
</form>

灵感来自@Cfreak答案，该答案不完整

— 贝拉什
source

0

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

— 这是鱼
source

-1

下载属性

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

— 罗哈拉·哈塔米
source

2

我喜欢您的回答

— George C.

2

问题是明确询问如何使用按钮而不是链接来执行此操作。

— 昆汀

-6

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

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

— 标记
source

我认为这不是问题所在。另外，如果链接与文件位于同一路径，则不需要“绝对”路径。

— 火箭Hazmat

@Rocket-当然，您对绝对路径是正确的，但是，这是确定正确路径的最佳方法。我将把它留给OP来决定是否有帮助

— Mark

问题是明确询问如何使用按钮而不是链接来执行此操作。

— 昆丁

此解决方案中缺少download属性。即使添加了下载属性，它也不适用于跨域。

— s sharif

-6

对我来说，添加按钮而不是锚文本非常有效。

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

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

— 布拉纳
source

5

这仅适用于您的浏览器，不支持.doc文件。

— 由Adrian设计，

您的HTML无效。<a>元素不能包含<button>元素。

— 昆汀

总是这样吗？当您发表评论时，这个答案已经两年了。

— 约翰·洛德