如果你愿意

<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 " > < >按钮下载!< /按钮> < / > 这将下载文件作为。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上进行了测试。

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

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

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

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