Question

我正在尝试使用以下方式使用数据uri下载文件：

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

问题是下载的文件总是被命名为“未知”，无论我尝试使用什么文件名。这是给文件命名的正确方法吗？或其他需要的东西完成了？

Answer 1

以下是解决方案，您只需要为锚标记添加download属性即可具有所需名称的a

<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

Anchor's Download Property

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，但它应该很容易分解出来......

Answer 3

对于那些使用其他库如angularjs或backbone的人，你可以试试这样的东西。

$（'a.download'）。attr（'href'，'data：application / csv; charset = utf-8，'+ $ scope.data）;

Answer 4

我遇到了同样的问题，最后我解决了在服务器端提供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);

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

数据中下载文件的文件名：Application / octet-stream;

5 个答案: