如何使用javascript将json数据导出到excel文件?

时间:2015-03-24 10:44:27

标签: javascript jquery html json export-to-excel

我有需要导出到Excel工作表的json数据。我试过了

window.open('data:application/vnd.ms-excel,' + encodeURIComponent( $('#tableId').html()));

但这仅适用于html表。

2 个答案:

答案 0 :(得分:1)

如果csv格式符合您的需要,那么可以像this topic一样轻松完成。

否则,您必须手动将JSON解析为Excel文件的“XML”格式(因为我不知道任何库这样做)。在这种情况下,您将不得不研究Excel文件格式,这在MSDN blog

中有解释

干杯

答案 1 :(得分:0)

@ niravpatel9898的原始答案对我来说效果很好,但是在解析我拥有的JSON数据时,实际下载到CSV会导致Excel中出现此错误: 如果您以逗号分隔(.csv)格式保存此工作簿,则某些功能可能会丢失。要保留这些功能,请将其保存为Excel文件格式。是否有任何方法可以消除此警告,并确保数据能够正确解析并下载到Excel?

当我尝试使用更改代码以输出到.xls或使用@iwayankit建议的解决方案时,它似乎不起作用。下面是@ niravpatel9898尝试使用的原始代码:

<script>
$(document).ready(function() {
  $('button').click(function() {
    var data = $('[id="xyz"]').val();
    if (data == '')
      return;

    JSONToCSVConvertor(data, "Report", true);
  });
});

function JSONToCSVConvertor(JSONData, ReportTitle, ShowLabel) {
  //If JSONData is not an object then JSON.parse will parse the JSON string in an Object
  var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;

  var CSV = '';
  //Set Report title in first row or line

  CSV += ReportTitle + '\r\n\n';

  //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 = "";
  //this will remove the blank-spaces from the title and replace it with an underscore
  fileName += ReportTitle.replace(/ /g, "_");

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

  // Now the little tricky part.
  // you can use either>> window.open(uri);
  // but this will not work in some browsers
  // or you will not get the correct file extension    

  //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);
}

</script>