当点击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类型。

1512211 次浏览
小开

jQuery:

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

对于按钮可以这样做

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

如果你使用<a>标记，不要忘记使用指向文件的整个url——即:

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

是什么:

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

HTML:

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

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

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

地点:

  • 这意味着页面和文件必须共享相同的域、子域、协议(HTTP vs. HTTPS)和端口(如果指定)。例外是blob:和data:(总是有效)和file:(从不有效)。
  • proposed_file_name是要保存到的文件名。如果它为空，浏览器默认为文件的名称。

文档:中数， HTML下载标准， HTML标准download， CanIUse

小开

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

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

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

在你的<body>和</body>标签之间的任何地方，使用下面的代码放入一个按钮:

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

这一定有用!

小开

我觉得这就是你想要的解决方案

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

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

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

如果您有一个复杂的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的不完整的答案

小开

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

<div onClick=(()=>{downloadjs(url, filename)})/>

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

小开

对我来说，点击按钮而不是锚文本工作得很好。

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

在大多数规则下，这可能是不合适的，但它看起来相当不错。

小开

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

小开

引导程序版本

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

记录了在Bootstrap 4文档，并且在Bootstrap 3中也可以工作。

小开

一个简单的JS解决方案:

function download(url) {
const a = document.createElement('a')
a.href = url
a.download = url.split('/').pop()
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
}
小开
我提出的解决方案是，你可以在锚标签中使用下载属性，但它只会在你的html文件在服务器上工作。但是你可能会有一个问题，比如在设计一个简单的html页面时，我们如何检查它，你可以使用VS code live server或括号live server，你会看到你的下载属性将工作，但如果你试图通过双击html页面来打开它，它会打开文件而不是下载它。 结论:只有当你的HTML文件不是服务器时，锚标签中的属性下载才有效
小开
< p > # EYZ0
# EYZ1。< br > 按钮和text-decoration将有助于改变或删除链接的文本装饰的最简单的方法之一
小开

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

<a href="/assets/hello.txt" download="my_file.txt"><button>Download 2</button></a>
  • /assets/hello.txt只是我网站上的一个相对路径。将其更改为您自己的相对路径。
  • my_file.txt是您希望在下载时调用文件的名称。

解释

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

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

enter image description here

<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>

# EYZ0:

  • 按钮1在一个新的浏览器选项卡中打开文本文件。但是，按钮1 将下载了它自己无法打开的文件类型(例如，.apk文件)。
  • 按钮2下载文本文件。但是，如果路径是相对的，按钮2只下载文件。当我将路径更改为绝对路径时，浏览器会在一个新选项卡中打开它。

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

小开

你好，我只是包括“下载”这个词，工作得很好。

<a href="file.pdf" download>Download</a>

所以在javascript中你可以使用以下代码:

function onStartedDownload(id) {
console.log(`Started downloading: ${id}`);
}


function onFailed(error) {
console.log(`Download failed: ${error}`);
}


var downloadUrl = "https://example.org/image.png";


var downloading = browser.downloads.download({
url : downloadUrl,
filename : 'my-image-again.png',
conflictAction : 'uniquify'
});


downloading.then(onStartedDownload, onFailed);
小开

这并不是对最初问题的答案，但它可能会帮助那些面临与我类似情况的人。

如果您想下载的文件不在同一个源上，但您希望能够下载它，您可以使用Content-Disposition 头。确保服务器在响应文件请求时包含头文件。

设置一个值 Content-Disposition: attachment将确保文件将被下载，而不是在浏览器中查看

在这种情况下，一个简单的<a href="http://www.notMyOrigin.com/file.txt">Download</a>指向您的文件就可以下载它。

小开

如果你愿意

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

对于下载文件的能力，否则将由浏览器渲染，但仍然想要一个整洁的javascript函数在按钮中使用;你可以在HTML中有一个看不见的链接，然后在javascript中点击它。

function download_file() {
document.getElementById("my_download").click()
}
<a id="my_download" href="path_to_file" download="file_name" style="display:none;"></a>


<button onClick="download_file()">Download!!!</button>

小开

你所需要做的就是在你输入的文件名后面加上下载:

之前:

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

后

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

确保下载用大写字母书写，否则它将无法工作。


提交答案