尝试使用 javascript 导出 CSV 时，严格模式下不允许分配给只读属性时出错

Question

请参考代码-

$scope.JSONToCSVConvertor = function(ShowLabel) {
var arrData = typeof $scope.SampleJsonObj != 'object' ? JSON.parse($scope.SampleJsonObj) : $scope.SampleJsonObj;

var CSV = '';    

var ReportTitle = "sample";

//This condition will generate the Label/Header
if (ShowLabel) {

    var row = "";

    //This loop will extract the label from 1st index of on array
    for (var index in arrData[0]) {

        //Now convert each value to string and comma-seprated
        row += index + ',';
    }

    row = row.slice(0, -1);

    //append Label row with line break
    CSV += row + '\r\n';
}

//1st loop is to extract each row
for (var i = 0; i < arrData.length; i++) {
    var row = "";

    //2nd loop will extract each column and convert it in string comma-seprated
    for (var index in arrData[i]) {
        row += '"' + arrData[i][index] + '",';
    }

    row.slice(0, row.length - 1);

    //add a line break after each row
    CSV += row + '\r\n';
}

if (CSV == '') {        
    alert("Invalid data");
    return;
}   

//Generate a file name
var fileName = "Usersearch";  

//Initialize file format you want csv or xls
var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);


//this trick will generate a temp <a /> tag
var link = document.createElement("a");    
link.href = uri;

//set the visibility hidden so it will not effect on your web-layout
link.style = "visibility:hidden";
link.download = fileName + ".csv";

//this part will append the anchor tag and remove it after automatic click
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

}

说明- 该代码在 chrome 浏览器中运行，但在 IE 中出现问题。请指导我。我在 'link.style = "visibility:hidden";' 行遇到类似'TypeError: Assignment to read-only properties is not allowed in strict mode' 之类的问题。

Answer 1

我在 IE 浏览器中添加了一些额外的条件。现在代码在 IE 和 Chrome 中都可以使用。请参考代码：

$scope.JSONToCSVConvertor = 函数 (ShowLabel) { //如果 JSONData 不是一个对象，那么 JSON.parse 将解析一个 Object 中的 JSON 字符串 var arrData = typeof $scope.searchResult != 'object' ? JSON.parse($scope.searchResult) : $scope.searchResult;

  var CSV = '';

  var ReportTitle = "sample";

  if (ShowLabel) {

    var row = "";

    for (var index in arrData[0]) {

      //Now convert each value to string and comma-seprated
      row += index + ',';
    }

    row = row.slice(0, -1);

    CSV += row + '\r\n';
  }

  //1st loop is to extract each row
  for (var i = 0; i < arrData.length; i++) {
    var row = "";

    //2nd loop will extract each column and convert it in string comma-seprated
    for (var index in arrData[i]) {
      row += '"' + arrData[i][index] + '",';
    }

    row.slice(0, row.length - 1);

    //add a line break after each row
    CSV += row + '\r\n';
  }

  if (CSV == '') {
    alert("Invalid data");
    return;
  }

  //Generate a file name
  var fileName = "Usersearch";

  if(msieversion()){
    var IEwindow = window.open();
    IEwindow.document.write(CSV);
    IEwindow.document.close();
    IEwindow.document.execCommand('SaveAs', true, fileName + ".csv");
    IEwindow.close();
} else {
    var element = angular.element('<a/>');
    element.attr({
      href: 'data:attachment/csv;charset=utf-8,' + encodeURI(CSV),
      target: '_blank',
      download: 'Usersearch.csv'
    })[0].click();
} 

};

function msieversion() {
  var ua = window.navigator.userAgent; 
  var msie = ua.indexOf("MSIE "); 
  if (msie != -1 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If IE
  {
    return true;
  }

  return false; 
};