1. 程式人生 > >js匯出表格

js匯出表格

<div class="container"> <table id="backViewTable" class="table table-hover table-sm table2excel"> <tr> <td>#</td> <td>ID</td> <td>姓名</td> <td>座位號</td> <td>操作</td> </tr> <tr> <th scope="row">1</th> <td>1234</td> <td>李文斐</td> <td>2樓 3排 34號 </td> <td><input class="btn-primary" type="button" value="刪除" /></td> </tr> <tr> <th scope="row">2</th> <td>2345</td> <td>lwf</td> <td>1樓 3排 34號</td> <td><input class="btn-primary" type="button" value="刪除" /></td> </tr> <tr> <th scope="row">3</th> <td>3456</td> <td>Lee</td> <td>1樓 3排 12號</td> <td><input class="btn-primary" type="button" value="刪除" /></td> </tr> </table> <button class="btn btn-primary btn-sm" onclick="tablesToExcel(['backViewTable'], ['ProductDay1'], 'TestBook.xls', 'Excel')">Export to Excel</button> </div> <script> var tablesToExcel = (function () { var uri = 'data:application/vnd.ms-excel;base64,', tmplWorkbookXML = '<?xml version="1.0"?><?mso-application progid="Excel.Sheet"?><Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet" xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet">' + '<DocumentProperties xmlns="urn:schemas-microsoft-com:office:office"><Author>Axel Richter</Author><Created>{created}</Created></DocumentProperties>' + '<Styles>' + '<Style ss:ID="Currency"><NumberFormat ss:Format="Currency"></NumberFormat></Style>' + '<Style ss:ID="Date"><NumberFormat ss:Format="Medium Date"></NumberFormat></Style>' + '</Styles>' + '{worksheets}</Workbook>', tmplWorksheetXML = '<Worksheet ss:Name="{nameWS}"><Table>{rows}</Table></Worksheet>', tmplCellXML = '<Cell{attributeStyleID}{attributeFormula}><Data ss:Type="{nameType}">{data}</Data></Cell>', base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }, format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) } return function (tables, wsnames, wbname, appname) { var ctx = ""; var workbookXML = ""; var worksheetsXML = ""; var rowsXML = "";
for (var i = 0; i < tables.length; i++) { if (!tables[i].nodeType) tables[i] = document.getElementById(tables[i]);
// 控制要匯出的行數 for (var j = 0; j < tables[i].rows.length; j++) { rowsXML += '<Row>';
// 控制匯出的列數(在本例中,最後一列為button,匯出的檔案會出錯,所以匯出到倒數第二列 for (var k = 0; k < tables[i].rows[j].cells.length - 1; k++) { var dataType = tables[i].rows[j].cells[k].getAttribute("data-type"); var dataStyle = tables[i].rows[j].cells[k].getAttribute("data-style"); var dataValue = tables[i].rows[j].cells[k].getAttribute("data-value"); dataValue = (dataValue) ? dataValue : tables[i].rows[j].cells[k].innerHTML; var dataFormula = tables[i].rows[j].cells[k].getAttribute("data-formula"); dataFormula = (dataFormula) ? dataFormula : (appname == 'Calc' && dataType == 'DateTime') ? dataValue : null; ctx = { attributeStyleID: (dataStyle == 'Currency' || dataStyle == 'Date') ? ' ss:StyleID="' + dataStyle + '"' : '', nameType: (dataType == 'Number' || dataType == 'DateTime' || dataType == 'Boolean' || dataType == 'Error') ? dataType : 'String', data: (dataFormula) ? '' : dataValue, attributeFormula: (dataFormula) ? ' ss:Formula="' + dataFormula + '"' : '' }; rowsXML += format(tmplCellXML, ctx); } rowsXML += '</Row>' } ctx = { rows: rowsXML, nameWS: wsnames[i] || 'Sheet' + i }; worksheetsXML += format(tmplWorksheetXML, ctx); rowsXML = ""; }
ctx = { created: (new Date()).getTime(), worksheets: worksheetsXML }; workbookXML = format(tmplWorkbookXML, ctx);
// 檢視後臺的列印輸出 console.log(workbookXML);
var link = document.createElement("A"); link.href = uri + base64(workbookXML); link.download = wbname || 'Workbook.xls'; link.target = '_blank'; document.body.appendChild(link); link.click(); document.body.removeChild(link); } })(); </script>