码迷,mamicode.com
首页 > Web开发 > 详细

js导出表格

时间:2018-12-08 11:27:22      阅读:239      评论:0      收藏:0      [点我收藏+]

标签:ons   exp   html   ica   gid   nload   enc   XML   new   

<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>

js导出表格

标签:ons   exp   html   ica   gid   nload   enc   XML   new   

原文地址:https://www.cnblogs.com/liuliang389897172/p/10086513.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!