您可以使用SheetJS创建具有多个工作表并具有格式(包括colspan和rowspan)的Excel工作簿。这是讨论线程和该线程中发布的示例:
我已将reviewher的示例代码从JSFiddle移到Stack
Overflow,以方便查看。运行代码段,然后单击生成的Excel链接以下载包含两页的Excel文件。
function prepareTable(i) { var str = "", header = "", graphImg; header = '<html><h2 >Google' + i + '</h2>'; str = '<table border="1">' +'<tr><td colspan="6">Yahoo' + i + '</td></tr>' +'<tr><td colspan="6">(2017.03.20)</td></tr>' +'<thead>' +' <tr >' +' <th scope="col" rowspan="2">' +' <div>Yahoo</div>' +' </th>' +' <th scope="col">' +' <div >Yahoo(2017-01)</div>' +' </th>' +' <th scope="col" colspan="2">' +' <div >Yahoo(2016-12)</div>' +' </th>' +' <th scope="col" colspan="2">' +' <div >Yahoo(2016-12)</div>' +' </th>' +' </tr>' +' <tr >' +' <th height="40" align="right">' +' <div>Yahoo</div>' +' </th>' +' <th align="right">' +' <div>Yahoo</div>' +' </th>' +' <th align="right">' +' <div>Yahoo</div>' +' </th>' +' <th align="right">' +' <div>Yahoo</div>' +' </th>' +' <th align="right">' +' <div>Yahoo</div>' +' </th>' +' </tr>' +'</thead>' +' <tbody>' +' <tr >' +' <td >' +' <div>NAME</div>' +' </td>' +' <td >' +' <div>311,210</div>' +' </td>' +' <td >' +' <div>311,210</div>' +' </td>' +' <td >' +' <div>311,210%</div>' +' </td>' +' <td >' +' <div>311,210</div>' +' </td>' +' <td >' +' <div>311,210%</div>' +' </td>' +' </tr>' +' </tbody>' +'</table></html>'; return header + str; } function s2ab(s) { var buf = new ArrayBuffer(s.length); var view = new Uint8Array(buf); for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF; return buf; } function doExcel1 () { var blob, wb = {SheetNames:[], Sheets:{}}; var ws1 = XLSX.read(prepareTable(1), {type:"binary"}).Sheets.Sheet1; wb.SheetNames.push("Sheet1"); wb.Sheets["Sheet1"] = ws1; var ws2 = XLSX.read(prepareTable(2), {type:"binary"}).Sheets.Sheet1; wb.SheetNames.push("Sheet2"); wb.Sheets["Sheet2"] = ws2; console.log(ws1); console.log(ws2); console.log(wb); blob = new Blob([s2ab(XLSX.write(wb, {bookType:'xlsx', type:'binary'}))], { type: "application/octet-stream" }); saveAs(blob, "test.xlsx"); } <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.10.3/xlsx.full.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script> <a href="javascript:" onclick="doExcel1()"><span>Excel</span></a>2)带有格式的工作表
这是另一个与GitHub线程相同的演示,展示了多个colspan,多个rowpan,背景颜色,字体颜色,字体大小等。该示例来自GitHub上的HeroSony。
如上所述,单击
Run pre snippet,然后单击结果
Excel链接以下载Excel文件。
function prepareTable() { var str = "", header = "", graphImg; header = 'uFEFF<h2 >Google</h2>'; str = '<table border="1">' +'<tr><td colspan="6">Yahoo</td></tr>' +'<tr><td colspan="6">(2017.03.20)</td></tr>' +'<thead>' +' <tr >' +' <th scope="col" rowspan="2">' +' <div>Yahoo</div>' +' </th>' +' <th scope="col">' +' <div >Yahoo(2017-01)</div>' +' </th>' +' <th scope="col" colspan="2">' +' <div >Yahoo(2016-12)</div>' +' </th>' +' <th scope="col" colspan="2">' +' <div >Yahoo(2016-12)</div>' +' </th>' +' </tr>' +' <tr >' +' <th height="40" align="right">' +' <div>Yahoo</div>' +' </th>' +' <th align="right">' +' <div>Yahoo</div>' +' </th>' +' <th align="right">' +' <div>Yahoo</div>' +' </th>' +' <th align="right">' +' <div>Yahoo</div>' +' </th>' +' <th align="right">' +' <div>Yahoo</div>' +' </th>' +' </tr>' +'</thead>' +' <tbody>' +' <tr >' +' <td >' +' <div>NAME</div>' +' </td>' +' <td >' +' <div>311,210</div>' +' </td>' +' <td >' +' <div>311,210</div>' +' </td>' +' <td >' +' <div>311,210%</div>' +' </td>' +' <td >' +' <div>311,210</div>' +' </td>' +' <td >' +' <div>311,210%</div>' +' </td>' +' </tr>'; +' </tbody>' +'</table>'; return header + str; } function doExcel1 () { var blob, template = prepareTable(); blob = new Blob([template], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8" }); saveAs(blob, "test.xls"); } <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script> <a href="javascript:" onclick="doExcel1()"><span>Excel</span></a>


