參考鏈接:
https://blog.csdn.net/weixin_33724046/article/details/89611397
https://www.cnblogs.com/lvsk/p/11970747.html
https://www.jianshu.com/p/5c131c27841c
https://blog.csdn.net/tian_i/article/details/84327329
原表
目標導出格式:
引用文件js-xlsx相關依賴(如果找不到去github上或者官網上找):

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/javascript" src="http://oss.sheetjs.com/js-xlsx/xlsx.core.min.js"></script> <script type="text/javascript" src="http://sheetjs.com/demos/FileSaver.js"></script>
單元格格設置相關屬性:
相關文檔:
js-xlsx 官方文檔:https://sheetjs.gitbooks.io/docs/#sheetjs-js-xlsx
npm xlsx地址:https://www.npmjs.com/package/xlsx
官網:https://sheetjs.com/opensource
使用代碼(以ajax調用返回數據為例):
$.ajax({ url: '/api/', type: 'POST/GET', dataType: 'json', data: postData, success: function (res) { var d = res.data; //返回的數據 table樣式 // 1. 數組頭部新增表頭(重命名) res.data.unshift({ id: 'ID', name:'姓名','age':'年齡' ,'course':'課程','grade':'成績' }); //創建book var workbook = XLSX.utils.book_new(); //json轉sheet var workSheet = XLSX.utils.json_to_sheet(res.data, { header: [], skipHeader: true }); // 獲取數據的長度 var y = d.length; //導出表格有多少列,同EXCEL的命名一致,這里是三列 var sheetTable = ["A","B","C","E","F"]; for (var j = 0; j < sheetTable.length; j++) { var sheetHead = sheetTable[j]; for (var i = 0; i < y; i++) { var rowname = i + 1; var sheetName = sheetHead + "" + rowname; //設置相關單元格居中顯示,和自適應還可以設置其他屬性 workSheet[sheetName].s = { alignment: { vertical: "center", horizontal: "center",wrapText:true } }; } } //單元格合並,設置單元格合並的配置 const merge = res.pzconfig; //這里在后台已經設置好合並規則,也可在前端進行規則設置,設置方法后序介紹 workSheet['!merges'] = merge; //設置每列的長度 workSheet["!cols"] = [{ wpx: 80 }, { wpx: 80 }, { wpx: 80 }, { wpx: 80 }, { wpx: 80 }]; //單元格列寬 //增加一個工作簿,也可根據業務增加多個工作簿 XLSX.utils.book_append_sheet(workbook, workSheet, '導出數據'); //這里以時間戳命名導出的文件 var timestamp = (new Date()).getTime(); //導出EXCEL XLSX.writeFile(workbook, "file" + timestamp + ".xlsx"); }, error: function (res) { //錯誤提示 } }); });
單元格橫向或縱向合並的方法:
//根據需要顯示的內容設置合並規則,這里僅以文章需要達成的目標設置規則 var mergeConfig = [ //列數據相同的進行合並(根據業務邏輯設置規則) //行列下標都從0開始的,由於第一行是標題,所以合並從第二行開始。 //第四列和第五列不需要合並(因為展示的是學科和成績) //合並(1,2,3列)第二行和第三行數據 //第一列的(第二行和第三行數據) { s: { c: 0, r: 1 }, e: { c: 0, r: 2 } }, //第二列(第二行和第三行數據) { s: { c: 1, r: 1 }, e: { c: 1, r: 2 } }, //第三列(第二行和第三行數據) { s: { c: 2, r: 1 }, e: { c: 2, r: 2 } }, //合並(1,2,3列)第四行和第六行數據 //第一列(第四行和第六行數據) { s: { c: 0, r: 3 }, e: { c: 0, r: 5 } }, //第二列(第四行和第六行數據) { s: { c: 1, r: 3}, e: { c: 1, r: 5 } }, //第三列(第四行和第六行數據) { s: { c: 2, r: 3 }, e: { c: 2, r: 5 } }, //合並(1,2,3列)第七行數據 //第一列(第7行數據) { s: { c: 0, r: 6 }, e: { c: 0, r: 6 } }, //第二列(第7行數據) { s: { c: 1, r: 6 }, e: { c: 1, r: 6 } }, //第三列(第7行數據) { s: { c: 2, r: 6 }, e: { c: 2, r: 6 } },
//如果要和並列的話,可以設 行不變,合不同的列,如下(合並第七行的第三列到第六列):
// { // s: { c: 2, r: 6 }, // e: { c: 5, r: 6 } // },
]