如何手动触发从href下载文件答案

【问题标题】：How to trigger downloading file from a href manually如何手动触发从href下载文件
【发布时间】：2016-09-02 20:48:39
【问题描述】：

我需要从以 base64 格式返回文件数据的 API 获取文件。我将其添加到如下所示的<a href 标签中

<a id="myFile" href="data:image/png;base64,..." click="downloadFile()">Download File</a>

所以我想使用 $('#myFile').click() 触发文件下载，这将是 downloadFile() 函数，但我不能使用 location.href 因为我不希望页面被重定向。

这个要求有什么替代方案吗？任何建议都会有很大帮助。

注意：单击链接后，我将通过一些 ajax 响应动态获取 href 值，最初 href 设置为 # 并将替换为上述适当的可下载字符串。我想触发文件下载以及触发 ajax 请求的同一事件，而不是单独的点击事件。

【问题讨论】：

有限的浏览器支持。这是一个仅限 Chrome 的解决方案。 stackoverflow.com/a/15832662/5496966 .. 您还可以将应用程序类型从 data:image/png 替换为 data:application/octet-stream .. 它会强制浏览器下载而不是导航到 href 值。
也可以下载bin文件。您必须使用任何方法为其命名和文件类型。
真棒 Ankith。这真的奏效了。无论如何使它成为多浏览器。只需在常规答案中提及即可，将其标记为正确。感谢您的帮助。
认为您应该在标题中手动切换为自动切换。手动意味着用户必须点击链接来保存它

标签： javascript jquery

【解决方案1】：

ajax 请求完成后，只需在 DOM 中创建、单击和删除一个新链接。应该可以。

这是JS fiddle example的链接。

// execute this after the ajax request is complete

var myFile = document.getElementById('myFile');
var dataURI = myFile.getAttribute('href');

myFile.addEventListener("click", function(event){
  event.preventDefault();
  // check if href value exists
  if(dataURI.length) {
    var fileName = 'image.png';
    var link = document.createElement("a");
    link.setAttribute("href", dataURI);
    link.setAttribute("download", fileName);    
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    delete link;
  }
});

注意：如果有跨域请求，浏览器可能不支持下载属性中设置的文件名。

【讨论】：

不需要将base64 url转换为object url
谢谢！更新。我在看他们是如何被对待的。这让我很困惑。

【解决方案2】：

您可以只使用download 属性 - 不需要 JS。

<a id="myFile" href="data:image/png;base64,..." download>Download File</a>

https://developer.mozilla.org/en/docs/Web/HTML/Element/a#attr-download

【讨论】：

我看的不是这个。我在我的初始请求中添加了一条注释。我的实际请求是使用 ajax 请求下载文件。 Ajax 请求广告下载文件应该发生在同一个点击事件中。
我仍然认为你应该添加下载属性（还有一个名称），当链接的 href 被创建后调用 myFile.click() 以在 ajax 完成时自动下载它
初始值为#所以点击页面重新加载，这不是他想要的。他有一个脚本设置为在第一次点击时更改 href 值，这就需要防止默认 .. 所以他不能使用下载属性。
另外下载的是一个 HTML5 标记，它不适用于许多旧版本。

【解决方案3】：

如果您在页面中包含FileSaver，那么您可以执行类似的操作

fetch(url).then(res => res.blob()).then(blob => saveAs(blob, 'filename.txt'))

【讨论】：