这很疯狂，但我不知道怎么做，因为这些词太常见了，在搜索引擎上很难找到我需要的东西。我想这个问题应该很容易回答。
我想要一个简单的文件下载，这将与此相同:
<a href="file.doc">Download!</a>
但是我想使用一个HTML按钮，例如:
<input type="button" value="Download!">
<button>Download!</button>
同样，是否有可能通过JavaScript触发一个简单的下载?
$("#fileRequest").click(function(){ /* code to download? */ });
我绝对不会寻找一种方法来创建一个看起来像按钮的锚，使用任何后端脚本，或混乱的服务器头或mime类型。
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>
地点:
path_to_file是解析为同一源上的URL的路径。这意味着页面和文件必须共享相同的域、子域、协议(HTTP vs. HTTPS)和端口(如果指定了)。例外是blob:和data:(总是工作)和file:(从不工作)。 Proposed_file_name是要保存到的文件名。如果它为空，浏览器默认为文件的名称。
文档:MDN, HTML标准下载，HTML标准下载，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"); 下载。addEventListener(“点击”,请求); 函数请求(){ 窗口。Location = 'document.docx'; ｝ .dwnld-cta { 边框半径:15px 15px; 宽度:100 px; 行高:22 px ｝ 下载文件< h1 > < / 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)
}
The solution I have come up with is that you can use download attribute in anchor tag but it will only work if your html file is on the server. but you may have a question like while designing a simple html page how can we check that for that you can use VS code live server or bracket live server and you will see your download attribute will work but if you will try to open it simply by just double clicking html page it open the file instead of downloading it. conclusion: attribute download in anchor tag only works if your html file is no server.
< a href = " file.doc " > < >按钮下载!< /按钮> < / > 这将下载文件作为。doc文件扩展名不支持在浏览器中打开。 其中一个最简单的方法按钮和文字装饰将有助于改变或删除链接的文字装饰。
在我的测试中，以下内容适用于所有文件类型和浏览器，只要你使用相对链接:
<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在一个新的浏览器选项卡中打开文本文件。但是，Button 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头文件来完成。确保服务器在响应文件请求时包含头文件。
设置如下值 内容处理:附件将确保文件将被下载，而不是在浏览器中查看。
一个简单的< A href="http://www.notMyOrigin.com/file.txt">Download</ A >指向你的文件应该在这种情况下下载它。
如果你愿意
<a href="path_to_file" download="proposed_file_name">Download</a>
对于下载文件的能力，否则将由浏览器渲染，但仍然想要一个整洁的javascript函数在按钮中使用;你可以在HTML中有一个看不见的链接，然后在javascript中点击它。
函数download_file() { . getelementbyid(“my_download”).click () ｝ <a id="my_download" href="path_to_file" download="file_name" style="display:none;" > < / > <按钮onClick = " download_file() " >下载! !< / >按钮
你所需要做的就是在你输入的文件名后面加上下载:
之前:
<a href="file.doc">Download!</a>
后
<a href="file.doc" Download >Download!</a>
确保下载用大写字母书写，否则它将无法工作。
