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

时间:2017-11-01 06:35:11

标签: javascript angularjs csv

请参阅代码 -

$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中遇到问题。请指导我。我遇到类似错误的问题:严格模式下不允许分配给只读属性&#39; at line&#39; link.style =&#34; visibility:hidden&#34 ;;&#39;

1 个答案:

答案 0 :(得分:0)

我在IE浏览器中添加了一些额外的条件。现在代码在IE和Chrome中都有效。请参考代码:

$ scope.JSONToCSVConvertor = function(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 Internet Explorer, return version number 
  {
    return true;
  } else { // If another browser, 
    return false;
  }    
    return false; 
};