您的位置：首页 > Web前端 > JavaScript

js导出excel

2017-08-26 20:13 176 查看

总的来说，两种方法：服务器端生成和浏览器端生成。

服务器端生成就是：根据用户请求，获取相应的数据，使用poi/jxl, jacob/jawin+excel,或是用数据拼html的table或是cvs纯文本的数据格式等。然后按.xls或是.cvs格式的文件的形式返回给用户，指定Content-Type:application/vnd.ms-excel ,浏览器就会提示要下载的文件是excel文件。

poi/jxl, jacob/jawin生成的是excel的biff格式。html/csv的是文本格式，不另存为excel文件，很多excel功能是用不了的。jacob/jawin需要服务器端是windows系统，且安装了excel2000以上版本。poi/jxl和html/csv方式的话，服务器端可以跨平台。

浏览器端生成excel文件还没有特别完善的方案，这是因为js无法处理二进制。大概有以下几个方案，各有利弊。

1. activex方式：使用js/vbs调用excel对象，http://setting.iteye.com/blog/219302，有个extjs的gridpanel导出为excel的例子。（ie+excel）

2. ie命令方式：将html或是csv输出到open的window，然后使用execCommand的saveas命令，存为csv或xls。 (ie6 only)

3. 服务器端中转方式：将html的table或是拼接的csv传到服务器端，服务器端再按照Content-Type:application/vnd.ms-excel返回，浏览器就会按excel方式处理。与服务器端拼接相比，少了一次取数操作。 (all)

4. data协议方式：对于支持data协议的浏览器，可以将html或是csv先用js base64处理，然后前缀data:application/vnd.ms-excel;base64,，即可使浏览器将其中的数据当做excel来处理，浏览器将提示下载或打开excel文件,可惜的是ie不支持。extjs的官网有一个grid的plugin，实现导出xhtml格式的伪excel文件，就是这么做的。 (except IE)

浏览器端只有第一种方案导出的是真正的biff格式的excel文件，其他方式都是文本格式。activex方式只能在windows平台的ie浏览器使用，而且需要降低ie的安全性，所以应用比较有限。复杂的excel文件，还是在服务器端用poi/jxl生成excel比较好。如果浏览器固定位ie6，浏览器端方式2是最好的方案。如果要降低服务器端cpu的计算压力，客户端方案3可行，而且跨平台（比poi/jxl方式少了取数和生成二进制文件）。如果是非ie浏览器，方案4也不失为一种好方法。

ps: 还有一个方案，就是让安装了ie和excel的用户在网页上右键，点击“导出到 Microsoft Excel”，然后可以选择要导出的table区域，点“导入”按钮，完成导入。

方法一(推荐):

基于微软OpenXML协议,支持excel2007版本以上.

基于浏览器 data 协议 ,

欢迎点评,共同进步 !

注意:经测试此方法不支持ie浏览器

<html>
<head>
<meta http-equiv="content-Type" content="text/html;charset=utf-8"/>
<script type="text/javascript">
function base64 (content) {
return window.btoa(unescape(encodeURIComponent(content)));
}
function exportOffice(dom,tableID,fName){
var type = 'excel';
var table = document.getElementById(tableID);
var excelContent = table.innerHTML;
var excelFile = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:"+type+"' xmlns='http://www.w3.org/TR/REC-html40'>";
excelFile += "<head>";
excelFile += "<meta http-equiv=Content-Type; content=text/html;charset=UTF-8>";
excelFile += "<!--[if gte mso 9]>";
excelFile += "<xml>";
excelFile += "<x:ExcelWorkbook>";
excelFile += "<x:ExcelWorksheets>";
excelFile += "<x:ExcelWorksheet>";
excelFile += "<x:Name>";
excelFile += "{worksheet}";
excelFile += "</x:Name>";
excelFile += "<x:WorksheetOptions>";
excelFile += "<x:DisplayGridlines/>";
excelFile += "</x:WorksheetOptions>";
excelFile += "</x:ExcelWorksheet>";
excelFile += "</x:ExcelWorksheets>";
excelFile += "</x:ExcelWorkbook>";
excelFile += "</xml>";
excelFile += "<![endif]-->";
excelFile += "</head>";
excelFile += "<body><table>";
excelFile += excelContent;
excelFile += "</table></body>";
excelFile += "</html>";
var base64data = "base64," + base64(excelFile);
switch(type){
case 'excel':
dom.href ='data:application/vnd.ms-'+type+';'+base64data;;//必须是a标签，否则无法下载改名
dom.download = fName;
break;
}
}
</script>

</head>
<body>
<table id="targetTable">
<tr align="center">
<th>名次</th>
<th>姓名</th>
<th>成绩</th>
</tr>
<tr align="center">
<td>1</td>
<td>小明</td>
<td>100</td>
</tr>
<tr align="center">
<td>2</td>
<td>小红</td>
<td>95.5</td>
</tr>
</table>
</br>
<a onClick="exportOffice(this,'targetTable','excel下载')" href="javascript:void(-1)">
<input id="Button1" type="button" value="导出" /> </a>
</body>
</html>

原文链接 http://www.jianshu.com/p/a3642877d590

方法二

var tableToExcel = (function() {

var uri = 'data:application/vnd.ms-excel;base64,',

template = '<html><head><meta charset="UTF-8"></head><body><table>{table}</table></body></html>',

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(table, name) {

if (!table.nodeType) table = document.getElementById(table)

var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}

window.location.href = uri + base64(format(template, ctx))

}

})()

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航