下载文件的文件名为data:Application/octet-stream。

Question

我试图使用数据URI下载文件，方法如下：

<input type="button"
  onclick="window.location.href='data:Application/octet-stream;content-disposition:attachment;filename=file.txt,${details}'"
  value="Download"/>

问题在于无论我尝试使用什么作为文件名，下载的文件总是命名为“Unknown”。这是给文件命名的正确方式吗？还是需要做些其他的事情？

- parbi

---

所以我认为不可能使用data-uri来指定文件名。是否可以通过JavaScript实现？ - parbi

Answer 1

这里是解决方案，你只需要在要链接的a标签中添加一个download属性并指定文件名即可。

<a href="data:application/csv;charset=utf-8,Col1%2CCol2%2CCol3%0AVal1%2CVal2%2CVal3%0AVal11%2CVal22%2CVal33%0AVal111%2CVal222%2CVal333"
  download="somedata.csv">Example</a>

另一个解决方案是使用JQuery / Javascript。 锚点的下载属性

- Ashraf Bashir

---

但是如何使用 "OnClick= location href" 完成呢？ 我正在尝试弄清楚这个问题。 - Ron

@Ron，请检查我解决方案末尾的链接，我认为你可能会在那里找到你所询问的答案。 - Ashraf Bashir

@CristianTraìna，你找到方法了吗？ - Vigrant

@Vigrant 不，我有一个相关的问题（https://dev59.com/EFMI5IYBdhLWcg3wn85d），但没有答案。顺便说一下，我已经解决了这个问题，因为我需要下载一个pdf文件，所以我使用了“application/pdf”。 - Christian Vincenzo Traina

如果有人到这里来了，这应该在iOS 13中得到修复。 - Vigrant

Answer 2

在Safari浏览器中，您可能需要使用此功能，并指示用户使用⌘-S键保存文件：

window.open('data:text/csv;base64,' + encodeURI($window.btoa(content)));

否则，这将使用Filesaver.js，但效果还不错。

    var downloadFile = function downloadFile(content, filename) {
      var supportsDownloadAttribute = 'download' in document.createElement('a');

      if(supportsDownloadAttribute) {
        var link = angular.element('<a/>');
        link.attr({
          href: 'data:attachment/csv;base64,' + encodeURI($window.btoa(content)),
          target: '_blank',
          download: filename
        })[0].click();
        $timeout(function() {
          link.remove();
        }, 50);
      } else if(typeof safari !== 'undefined') {
        window.open('data:attachment/csv;charset=utf-8,' + encodeURI(content));
      } else {
        var blob = new Blob([content], {type: "text/plain;charset=utf-8"});
        saveAs(blob, filename);
      }
    }

注意：上述代码中有一些AngularJS，但可以轻松地分离出来...

- malix

---

在iOS中，这只是打开一个包含base64文本的页面。 - Christian Vincenzo Traina

Answer 3

我曾经遇到同样的问题，最终在服务器端服务CSV文件时成功解决了这个问题，适用于所有浏览器：

const result = json2csv({ data });

res.writeHead(200
        'Content-Type': 'application/octet-stream',
        'Content-Disposition': 'attachment;filename=issues.csv',
        'Content-Length': result.length
});

res.end(result);

- Aral Roca

Answer 4

对于那些使用其他库，比如angularjs或backbone的人，你可以尝试类似这样的方法。

$('a.download').attr('href', 'data:application/csv;charset=utf-8,'+$scope.data);

- Rick

Answer 5

对于任何想使用仅限Javascript的客户端解决方案的人，这里是我的解决方案，适用于除IE 10及以下版本（以及Edge...为什么？！）之外的任何浏览器：

var uri = 'data:application/csv;charset=UTF-8,' + encodeURIComponent(csv);
var link = document.createElement('a');
link.setAttribute("download", "extract.csv");
link.setAttribute("href", uri);
document.body.appendChild(link);
link.click();
body.removeChild(body.lastChild);

- Synedh