如何使用下载属性下载IE和Safari中的csv文件?

时间:2017-03-30 05:24:20

标签: javascript html angularjs

我有一个csv文件链接“http://spatialkeydocs.s3.amazonaws.com/FL_insurance_sample.csv.zip”。我的应用程序是angularjs应用程序,为了下载这个我使用“下载”属性它在chrome和firefox中工作正常。但这在IE和Safari中不起作用,因为IE和Safari浏览器不支持下载属性。你能不能请我建议如何让它适用于IE和Safari。如果可能的话可以分享一个人吗? 提前谢谢!

1 个答案:

答案 0 :(得分:3)

这是我在上一个项目中使用的代码。它并不完美,但它在所有浏览器和IE9 +中都通过了QA。

downloadCSV(data,fileName){
  var blob = new Blob([data], {type:  "text/plain;charset=utf-8;"});
  var anchor = angular.element('<a/>');

  if (window.navigator.msSaveBlob) { // IE
    window.navigator.msSaveOrOpenBlob(blob, fileName)
  } else if (navigator.userAgent.search("Firefox") !== -1) { // Firefox
    anchor.css({display: 'none'});
    angular.element(document.body).append(anchor);

    anchor.attr({
      href: 'data:attachment/csv;charset=utf-8,' + encodeURIComponent(data),
      target: '_blank',
      download: fileName
    })[0].click();

    anchor.remove();
  } else { // Chrome
    anchor.attr({
      href: URL.createObjectURL(blob),
      target: '_blank',
      download: fileName
    })[0].click();
  }
}

使用ms特定的API在IE中最适合我们。另请注意,某些浏览器要求锚实际位于DOM中以使下载属性起作用,而Chrome则不需要。此外,我们发现Blob在各种浏览器中的工作方式存在一些不一致之处。某些浏览器也有出口限制。这允许每个浏览器中最大可能的CSV导出。