當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端通过json数据导出excel表格文件（支持多级表头、复杂表头）（json转excel）

發布時間：2023/12/20 HTML 31 豆豆

生活随笔收集整理的這篇文章主要介紹了前端通过json数据导出excel表格文件（支持多级表头、复杂表头）（json转excel）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

downloadBmExcel(){let vm = this;let titles = ["順序號","責任者","文號","標題","日期","頁號","備注"];let keys = ['index',null,null,'name',null,'range',null];let groups = [];vm.groups.map((v)=>{if(!v.type){groups.push(v);}})JSONToExcelConvertor(groups,vm.volumeName+"_智能編目目錄",titles,keys);},console.log(groups)//數據格式//0://editing: false//id: "c9e9bc6b8a200001c9eb127049c02a00"//index: 0//ismulu: true//list: Array(3)//name: "訊問筆錄（（被告）第1次"//range: "1-3"//respon: ""//select: false 封裝 export function JSONToExcelConvertor (JSONData, FileName, title, keys, notital, titleH) {if (!JSONData) { return }// 轉化json為objectvar arrData = typeof JSONData !== 'object' ? JSON.parse(JSONData) : JSONDatavar excel = '<table>'// 設置表頭var row = notital ? '' : "<tr><th style='border: 1px solid #000000;height:36px;line-height:36px;' align='center' colspan='" + title.length + "'>" + (titleH || '卷內文件目錄') + '</th></tr><tr>'if (title) {// 使用標題項for (var i in title) {row += "<th style='border: 1px solid #000000;height:36px;line-height:36px;' align='center'>" + title[i] + '</th>'}} else {// 不使用標題項for (var i in arrData[0]) {row += "<th style='border: 1px solid #000000;height:36px;line-height:36px;' align='center'>" + i + '</th>'}}excel += row + '</tr>'// 設置數據for (var i = 0; i < arrData.length; i++) {var row = '<tr>'for (var k in title) {if (!keys[k]) {row += "<td style='border: 1px solid #000000;height:36px;line-height:36px;MSO-NUMBER-FORMAT:\"\@\"'></td>"} else {row += "<td style='border: 1px solid #000000;height:36px;line-height:36px;MSO-NUMBER-FORMAT:\"\@\"' align='center'>" + arrData[i][keys[k]] + '</td>'}}// for (var index in arrData[i]) {// //判斷是否有過濾行// if(filter)// {// if(filter.indexOf(index)==-1)// {// var value = arrData[i][index] == null ? "" : arrData[i][index];// row += '<td>' + value + '</td>';// }// }// else// {// var value = arrData[i][index] == null ? "" : arrData[i][index];// row += "<td align='center'>" + value + "</td>";// }// }excel += row + '</tr>'}excel += '</table>'var excelFile = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel' xmlns='http://www.w3.org/TR/REC-html40'>"excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">'excelFile += '<head>'excelFile += ''excelFile += '</head>'excelFile += '<body>'excelFile += excelexcelFile += '</body>'excelFile += '</html>'var uri = 'data:application/vnd.ms-excel;charset=utf-8,' + encodeURIComponent(excelFile)var link = document.createElement('a')link.href = urilink.style = 'visibility:hidden'link.download = FileName + '.xls'document.body.appendChild(link)link.click()document.body.removeChild(link) }

總結

以上是生活随笔為你收集整理的前端通过json数据导出excel表格文件（支持多级表头、复杂表头）（json转excel）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。