Heim > Artikel > Web-Frontend > So laden Sie ein Array im JSON-Format in eine Excel-Tabelle mit JS herunter

So laden Sie ein Array im JSON-Format in eine Excel-Tabelle mit JS herunter

php中世界最好的语言Original: 2018-04-14 09:44:012529Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie ein Array im JSON-Format für Excel mit JS herunterladen JS. Was sind die Hinweise in der Tabelle unten?

Das Beispiel ist wie folgt:

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben Weitere spannende Dinge finden Sie unter php Andere verwandte Artikel auf der chinesischen Website!

<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(){ 
      $('#wwo').click(function(){ 
        var data = {
"title":
[
{"value":"A1标题"}, 
{"value":"B1标题"}
],
"data":
[
[
{"value":"好好"}, 
{"value":"2015-08-24"}
],
[
{"value":"123"}, 
{"value":"hahah"}
]
]
}; 
        if(data == ''){ 
          return; 
}else{
JSONToExcelConvertor(data.data, "Report", data.title); 
}
      }); 
    }); 
 
    function JSONToExcelConvertor(JSONData, FileName, ShowLabel) { 
      //先转化json 
      var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData; 
       
      var excel = '<table>';   
       
      //设置表头 
      var row = "<tr>"; 
      for (var i = 0, l = ShowLabel.length; i < l; i++) { 
        row += "<td>" + ShowLabel[i].value + '</td>'; 
      } 
       
       
      //换行 
      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 += '<td>' + value + '</td>'; 
        } 
         
        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 += '<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">'; 
      excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel&#39;; 
      excelFile += &#39;; charset=UTF-8">'; 
      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 = 'data:application/vnd.ms-excel;charset=utf-8,' + 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>

Empfohlene Lektüre:

element-ui implementiert Import und Export

So bedienen Sie den ersten Buchstaben von Jackson beim Parsen eine JSON-String-Case-Konvertierung

Das obige ist der detaillierte Inhalt vonSo laden Sie ein Array im JSON-Format in eine Excel-Tabelle mit JS herunter. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：element-ui implementiert Import und ExportNächster Artikel：element-ui implementiert Import und Export

In Verbindung stehende Artikel

Mehr sehen