博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js导出表格
阅读量:6979 次
发布时间:2019-06-27

本文共 3723 字,大约阅读时间需要 12 分钟。

<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" οnclick="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>

转载于:https://www.cnblogs.com/liuliang389897172/p/10086513.html

你可能感兴趣的文章
Spark on Angel:Spark机器学习的核心加速器
查看>>
Sharding-Sphere成长记——写在分布式数据库代理端里程碑版本3.0.0发布之际
查看>>
与Bob McWhirter的问答:WildFly Swarm更名为Thorntail项目
查看>>
GitHub Licensed让遵循OSS许可协议变得更容易
查看>>
用vue开发一个猫眼电影web app
查看>>
Apache发布TomEE 7.1,支持Java 8和MicroProfile 1.2
查看>>
安卓用户当心啦 这个App可能会偷走你的比特币
查看>>
Facebook开源ptr:在Python环境中并行运行单元测试
查看>>
《引领转型》访谈录
查看>>
IT运维必备技能
查看>>
Swift 3来了!
查看>>
看法:2017会带给我们的文化和方法
查看>>
《基于React的前端工程实战》大纲,也是笔者心中的前端学习路线图
查看>>
你并不总希望在真正浏览器中进行测试:Selenium来营救
查看>>
2018年DevOps促进现状报告:DevOps精英的方法与习惯
查看>>
如何调试一个无法重现的错误?
查看>>
Android Studio 3.3 Beta提供了新的Android代码压缩器R8
查看>>
程序员,不要急于学习编程语言,先学会如何解决问题
查看>>
Bruck:一个Web界面布局原型设计框架\n
查看>>
Oracle开源Fn,加入Serverless之争
查看>>