这很疯狂,但我不知道怎么做,因为这些词太常见了,在搜索引擎上很难找到我需要的东西。我想这个问题应该很容易回答。

我想要一个简单的文件下载,这将与此相同:

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

但是我想使用一个HTML按钮,例如:

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

同样,是否有可能通过JavaScript触发一个简单的下载?

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

我绝对不会寻找一种方法来创建一个看起来像按钮的锚,使用任何后端脚本,或混乱的服务器头或mime类型。


当前回答

您可以使用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

其他回答

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

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

是什么:

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

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

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

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

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

之前:

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

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

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

一个简单的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)
}