Convert json format to excel table (detailed tutorial)-JS Tutorial-php.cn

Convert json format to excel table (detailed tutorial)

亚连

Release： 2018-06-19 10:22:14

Original

8342 people have browsed it

Below I will share with you a javascript method for downloading a json format array into an excel table. It has a good reference value and I hope it will be helpful to everyone.

The examples are as follows:

<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
  <script type="text/javascript" src="jquery183.min.js"></script> 
  <script type="text/javascript"> 
    $(document).ready(function(){ 
      $(&#39;#wwo&#39;).click(function(){ 
        var data = {
"title":
[
{"value":"A1标题"}, 
{"value":"B1标题"}
],
"data":
[
[
{"value":"好好"}, 
{"value":"2015-08-24"}
],
[
{"value":"123"}, 
{"value":"hahah"}
]
]
}; 
        if(data == &#39;&#39;){ 
          return; 
}else{
JSONToExcelConvertor(data.data, "Report", data.title); 
}
      }); 
    }); 
 
    function JSONToExcelConvertor(JSONData, FileName, ShowLabel) { 
      //先转化json 
      var arrData = typeof JSONData != &#39;object&#39; ? JSON.parse(JSONData) : JSONData; 
       
      var excel = &#39;<table>&#39;;   
       
      //设置表头 
      var row = "<tr>"; 
      for (var i = 0, l = ShowLabel.length; i < l; i++) { 
        row += "<td>" + ShowLabel[i].value + &#39;</td>&#39;; 
      } 
       
       
      //换行 
      excel += row + "</tr>"; 
       
      //设置数据 
      for (var i = 0; i < arrData.length; i++) { 
        var row = "<tr>"; 
         
        for (var index in arrData[i]) { 
          var value = arrData[i][index].value === "." ? "" : arrData[i][index].value; 
          row += &#39;<td>&#39; + value + &#39;</td>&#39;; 
        } 
         
        excel += row + "</tr>"; 
      } 
 
      excel += "</table>"; 
 
      var excelFile = "<html xmlns:o=&#39;urn:schemas-microsoft-com:office:office&#39; xmlns:x=&#39;urn:schemas-microsoft-com:office:excel&#39; xmlns=&#39;http://www.w3.org/TR/REC-html40&#39;>"; 
      excelFile += &#39;<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">&#39;; 
      excelFile += &#39;<meta http-equiv="content-type" content="application/vnd.ms-excel&#39;; 
      excelFile += &#39;; charset=UTF-8">&#39;; 
      excelFile += "<head>"; 
      excelFile += "<!--[if gte mso 9]>"; 
      excelFile += "<xml>"; 
      excelFile += "<x:ExcelWorkbook>"; 
      excelFile += "<x:ExcelWorksheets>"; 
      excelFile += "<x:ExcelWorksheet>"; 
      excelFile += "<x:Name>"; 
      excelFile += "{worksheet}"; 
      excelFile += "</x:Name>"; 
      excelFile += "<x:WorksheetOptions>"; 
      excelFile += "<x:DisplayGridlines/>"; 
      excelFile += "</x:WorksheetOptions>"; 
      excelFile += "</x:ExcelWorksheet>"; 
      excelFile += "</x:ExcelWorksheets>"; 
      excelFile += "</x:ExcelWorkbook>"; 
      excelFile += "</xml>"; 
      excelFile += "<![endif]-->"; 
      excelFile += "</head>"; 
      excelFile += "<body>"; 
      excelFile += excel; 
      excelFile += "</body>"; 
      excelFile += "</html>"; 
 
       
      var uri = &#39;data:application/vnd.ms-excel;charset=utf-8,&#39; + encodeURIComponent(excelFile); 
       
      var link = document.createElement("a");   
      link.href = uri; 
       
      link.style = "visibility:hidden"; 
      link.download = FileName + ".xls"; 
       
      document.body.appendChild(link); 
      link.click(); 
      document.body.removeChild(link); 
    } 
  </script> 
</head> 
<body> 
  <input type="button" id="wwo" value="导出" /> 
</body> 
</html>

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Use npm to create a vue project (detailed tutorial)

An error occurs when calling fs.renameSync in Node.js question?

How to configure the React Native development environment in VSCode

How to install Mint-UI in vue

How to implement collection data traversal display in AngularJS

How to integrate the carousel chart in mint-ui in vue.js

The above is the detailed content of Convert json format to excel table (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!