前端通过json数据导出excel表格文件（支持多级表头、复杂表头）（json转excel）
生活随笔
收集整理的這篇文章主要介紹了
前端通过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 += '<!--[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 += 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）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： PUN搭建大厅与网络同步
- 下一篇： 前端常见面试题-css篇