26

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

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

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

4

5 回答 5

43

这是解决方案，您只需向具有所需名称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 的下载属性

于 2012-12-17T13:08:31.347 回答
5

在 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，但应该很容易排除...

于 2015-04-08T06:59:01.040 回答
2

我遇到了同样的问题，最后我在服务器端提供 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);
于 2017-03-13T22:37:01.953 回答
1

对于那些使用其他库（如 angularjs 或主干）的人，您可以尝试类似的方法。

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

于 2015-02-02T01:23:53.383 回答
0

对于任何寻找仅使用 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);
于 2019-01-21T09:53:06.473 回答