在 Firefox 上下载文本文件或图像 throw javascript答案

【问题标题】：Download text file or image throw javascript on Firefox在 Firefox 上下载文本文件或图像 throw javascript
【发布时间】：2016-11-13 16:59:48
【问题描述】：

我正在尝试使用 http 链接下载文件。这是代码：

downloadFile: function (fileName, url) {
    var link = document.createElement('a');
    link.setAttribute('download', fileName);
    link.setAttribute('type', 'application/octet-stream');
    link.target = '_blank';
    link.href = url;

    document.body.appendChild(link);

    link.click();

    document.body.removeChild(link);
}

这适用于 Chrome 和 Edge，但不适用于 Firefox。当我尝试下载文本文件或图像时，浏览器会打开一个新选项卡，其中包含呈现的文件内容。我需要浏览器打开默认下载窗口。

有可能吗？

这是我使用的 URL 示例：http://localhost:17671/docstmp/528d149e37467a53faeeeb0556901d87/ToDo.txt

我创建了这个 jsfiddle 来演示：jsfiddle.net/hp7yod85

【问题讨论】：

正常的下载链接不行吗？
包含link.setAttribute('type', 'application/octet-stream'); link.target = '_blank';的目的是什么？
没有目标，文件内容与我的应用程序在同一页面中打开。并且类型是测试尝试下载
我不能使用普通链接，因为服务器会返回动态的 URL，它不是静态链接
type 属性似乎不是必需的。文件文件不应打开，但应显示Save File 对话框。可以创建一个jsfiddlejsfiddle.net来演示吗？

标签： javascript firefox downloadfile

【解决方案1】：

请求的资源没有设置Access-Control-Allow-Origin 标头，并将X-Frame-Options 标头设置为SAMEORIGIN 以防止加载到<iframe> 元素中。

您可以使用YQL 检索内容，然后在返回的结果中创建一个data URL 的文本内容，然后创建一个<a> 元素并将href 设置为data URL。返回打开对话框的预期结果，提示在文本编辑器中打开文件或在 firefox 47 中保存文件。

<!DOCTYPE html>
<html>
<body>
  <button onclick="downloadFile()">Test</button>
  <script>
  function downloadFile() {
    var request = new XMLHttpRequest();
    var url = 'https://query.yahooapis.com/v1/public/yql?q='
              + 'select * from html where '
              + 'url="http://www.ietf.org/rfc/bcp/bcp47.txt"&format=json&callback='
    request.open("GET", url);
    request.onload = function() {
      var data = JSON.parse(this.responseText).query.results.body.content;
      var a = document.createElement("a");
      a.href = "data:text/plain," + data;
      a.download = "bcp47.txt";
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    }
    request.send()
  }
  </script>
</body>
</html>

plnkrhttp://plnkr.co/edit/8JBBhVwIy0Icr2MaQZif?p=preview

【讨论】：

我认为这不会解决，因为我也可以下载大文件，比如700mb的rar。与此解决方案一样，用户不会从默认下载窗口看到进度
您可以在XMLHttpRequest 对象中包含progress 事件，以通知用户文件下载进度。原始问题未提及下载 700MB 文件或progress 事件？
是的，但我还必须实现取消事件......而且一切都已经由浏览器完成
@LuigiMaestrelli "但我还必须实现取消事件"你所说的“取消”事件是什么意思？这在原始问题中没有描述。原始问题描述了在 Firefox 下载文件的问题；不是progress 或“取消”活动？如有必要，您可以中止XMLHttpRequest。不确定您在“并且一切都已由浏览器完成”中引用的内容？见stackoverflow.com/help/how-to-ask。预期结果和当前问题的所有相关部分都应包含在原始问题中，而不是 cmets
@LuigiMaestrelli “我需要浏览器打开默认下载窗口。” 似乎是原始问题中所述的要求