背景
起初的需求是这样的，有一批报表（纯手工写的那种），需要execl导出的功能，之前的导出，都是用poi写的，由服务器端完成生成文件的责任，再交由浏览器端下载，这样做的好处是服务器端的语言大多是强类型的语言，在对于导出的文件的控制上更为精细，面向所有浏览器，存在的缺点是，报表本身的生成就会消耗服务器资源，特别是功底差的同学，这点尤为突出，接下来再生成一次文件 基本就是重复一次上面的动作，对于服务器压力更甚。
因此，我就去寻找浏览器端的execl导出方案，服务端数据集发送一次到浏览器端，浏览器端抓取table直接导出。
正文
申明下我的方案是猜想，但是大多数代码部分是在网上找的，所以先展示第一种解决方案的代码，再进行评述
varuri='data:application/vnd.ms-excel;base64,',
template='{worksheet}{table}',
base64=function(s){returnwindow.btoa(unescape(encodeURIComponent(s))) },
format=function(s,c){
returns.replace(/{(\w+)}/g,
function(m,p){returnc[p]; }) }
returnfunction(table,name){
if(!table.nodeType)table=document.getElementById(table)
varctx={worksheet:name||'Worksheet', table:table.innerHTML}
window.location.href=uri+base64(format(template,ctx))
}
})()
function getExplorer() {
var explorer = window.navigator.userAgent ;
//ie
if (explorer.indexOf("MSIE") >= 0) {
return 'ie';
}
//firefox
else if (explorer.indexOf("Firefox") >= 0) {
return 'Firefox';
}
//Chrome
else if(explorer.indexOf("Chrome") >= 0){
return 'Chrome';
}
//Opera
else if(explorer.indexOf("Opera") >= 0){
return 'Opera';
}
//Safari
else if(explorer.indexOf("Safari") >= 0){
return 'Safari';
}
}
function tableToExcel(tableid) {//整个表格拷贝到EXCEL中
if(getExplorer()=='ie')
{
var curTbl = document.getElementById(tableid);
var oXL = new ActiveXObject("Excel.Application");
//创建AX对象excel
var oWB = oXL.Workbooks.Add();
//获取workbook对象
var xlsheet = oWB.Worksheets(1);
//激活当前sheet
var sel = document.body.createTextRange();
sel.moveToElementText(curTbl);
//把表格中的内容移到TextRange中
sel.select;
//全选TextRange中内容
sel.execCommand("Copy");
//复制TextRange中内容
xlsheet.Paste();
//粘贴到活动的EXCEL中
oXL.Visible = true;
//设置excel可见属性
try {
var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
} catch (e) {
print("Nested catch caught " + e);
} finally {
oWB.SaveAs(fname);
oWB.Close(savechanges = false);
//xls.visible = false;
oXL.Quit();
oXL = null;
//结束excel进程，退出完成
//window.setInterval("Cleanup();",1);
idTmr = window.setInterval("Cleanup();", 1);
}
}
else
{
tableToExcel('ta')
}
}
html部分
<buttontype="button" onclick="tableToExcel('表格id','导出文件的sheet名')">Excel导出</button>
以上这种方式的原来帖子，百度一搜一大把，我也是用过一段时间突然在今天发现，这种方式的导出有个严重的问题存在，就是不能导出超过200条以上的table，但是速度奇快，但是分浏览器的。
下面介绍，今天我刚发现的一种，来自github的一个作者，这种方式可以弥补上面的条数限制的问题，同时作者为我们提供了PDF、CVS、DOC、SQL、XLS、XLSX等等格式的导出，有深入需求的可以去观摩源码
https://github.com/hhurz/tableExport.jquery.plugin
下面贴代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML table Export</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- <script type="text/javascript" src="../libs/js-xlsx/xlsx.core.min.js"></script> -->
<script type="text/javascript" src="../libs/FileSaver/FileSaver.min.js"></script>
<script type="text/javascript" src="../tableExport.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var Table = document.getElementById ( 'container' );
var T = [];
var r = 0;
var c = 1;
var rmax = 5555;
var cmax = 26;
T.push('<table id="grid">');
T.push('<thead>');
T.push('<tr>');
T.push('<th>col #</th>');
while (++c <= cmax+1)
T.push('<td>col ' + c + '</td>');
T.push('</tr>');
T.push('</thead>');
T.push('<tbody>');
while (r++ < rmax) {
c = 0;
T.push('<tr>');
T.push('<td>' + r + '</td>');
while (c++ < cmax)
T.push('<td>' + getRandomInt(100,10000) + '</td>');
T.push('</tr>');
}
T.push('</tbody>');
T.push('</table>');
Table.innerHTML = T.join ("");
$('#export').click(function() {
//2003版
$('#grid').tableExport({type:'excel',fileName:'文件名', excelstyles:['border-bottom', 'border-top', 'border-left', 'border-right']});
//2007版
// $('#grid').tableExport({type:'xlsx', excelstyles:['border-bottom', 'border-top', 'border-left', 'border-right']});
});
});
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>
</head>
<body>
<button id="export">Export to Excel</button>
<div id="container">
</div>
</body>
</html>
这里注意要引入的文件，如果是导出2003版本的execl文件，直接复制上面代码中的js文件进项目即可，
如果需要2007版本的放开代码中的注释，屏蔽掉2003版本的导出语句
源码提供了很多很多的设置参数，这个真的很方便，我贴一部分代码，一看便知
$.fn.extend({
tableExport: function (options) {
var defaults = {
consoleLog: false,//是否在控制台输出
csvEnclosure: '"',
csvSeparator: ',',
csvUseBOM: true,
displayTableName: false,
escape: false,
excelFileFormat: 'xlshtml', // xmlss = XML Spreadsheet 2003 file format (XMLSS), xlshtml = Excel 2000 html format
excelRTL: false, // true = Set Excel option 'DisplayRightToLeft'
excelstyles: [], // e.g. ['border-bottom', 'border-top', 'border-left', 'border-right']
exportHiddenCells: false, // true = speed up export of large tables with hidden cells (hidden cells will be exported !)
fileName: 'tableExport',//导出的execl文件名
htmlContent: false,
ignoreColumn: [],
ignoreRow: [],
jsonScope: 'all',
最后建议多阅读源码，感谢源码的提供者。
网友评论