js匯出表格
阿新 • • 發佈:2018-12-08
<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>
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>