Question

我正在尝试将一些数据导出到CSV文件。我有它在chrome工作但在IE11中我被重定向到另一个页面，其中blob数据作为url。

我已经过滤了一个名为 this.filteredReviews 的类数组下要导出的数据。我有一个调用 downloadButtonPush 功能的按钮。我正在隐藏的主体末端创建一个锚标记，并在创建后单击自己以下载csv数据。以下是我的代码。

downloadButtonPush() {
    var csvData = this.ConvertToCSV(this.filteredReviews);
    var a = document.createElement("a");
    a.setAttribute('style', 'display:none;');
    document.body.appendChild(a);
    var blob = new Blob([csvData], { type: 'text/csv' });
    var url = window.URL.createObjectURL(blob);
    a.href = url;
    a.download = 'ETPHoldReview.csv';
    a.click();
}
ConvertToCSV(objArray: any): string {
    var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
    var str = '';
    var row = "";

    for (var index in objArray[0]) {
        //Now convert each value to string and comma-separated
        row += index + ',';
    }
    row = row.slice(0, -1);
    //append Label row with line break
    str += row + '\r\n';

    for (var i = 0; i < array.length; i++) {
        var line = '';
        for (var index in array[i]) {
            if (line != '') line += ','

            line += array[i][index];
        }
        str += line + '\r\n';
    }
    return str;
}

在chrome中，数据导出正常但在IE中而不是打开文件下载管理器，我被重定向到一个新页面，其中包含以下URL地址。

团块：6F807758-B267-4F51-8B6F-0CFDAFE68B78

有谁知道为什么这段代码不能在IE中运行，或者知道是否有更简单的方法将json导出到角度为csv？

Answer 1

你必须为IE做一个特例（想象一下）。它使用msSaveBlob或msSaveOrOpenBlob函数。尝试重写你的downloadButtonPush（）函数，如下所示

downloadButtonPush() {
  var csvData = this.ConvertToCSV(this.filteredReviews);
  var blob = new Blob([csvData], { type: 'text/csv' });
  var url = window.URL.createObjectURL(blob);

  if(navigator.msSaveOrOpenBlob) {
    navigator.msSaveBlob(blob, filename);
  } else {
    var a = document.createElement("a");
    a.href = url;
    a.download = 'ETPHoldReview.csv';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  }
  window.URL.revokeObjectURL(url);
}

前一段时间我遇到了同样的问题，而PierreDuc从this answer获取了大部分内容

Answer 2

正如您最后的声明所说，您想要最简单的方法来下载csv中的数据。我建议您使用AngularCsv将json导出到csv。

安装

npm install --save angular-csv

示例

import { AngularCsv } from 'angular-csv/dist/Angular-csv';
 
var data = [
  {
    name: "Test 1",
    age: 13,
    average: 8.2,
    approved: true,
    description: "using 'Content here, content here' "
  },
  {
    name: 'Test 2',
    age: 11,
    average: 8.2,
    approved: true,
    description: "using 'Content here, content here' "
  },
  {
    name: 'Test 4',
    age: 10,
    average: 8.2,
    approved: true,
    description: "using 'Content here, content here' "
  },
];
 
new AngularCsv(data, 'My Report');

一件事，您需要了解它的名称不同，但是每个软件包的内部功能都是相同的，您可以在任何角度版本中使用任何软件包，但是如果您使用angular2，那么我会建议您，然后使用angular2-csv，如果您正在使用angular7，然后使用angular7-csv。

Angular2

npm install --save angular2-csv

Angular 5

npm install --save angular5-csv

Angular 7

npm install --save angular7-csv

有关更多信息，请访问https://www.npmjs.com/package/angular7-csv

将数据导出到角度打字稿中的csv文件

2 个答案: