JS导出html的table表格

jsp的html的内容如下,我的这个是使用了jstl标签形成的table

<span id="Button1" οnclick="javascript:HtmlExportToExcel('PanelExcel')">导出excel</span>
       <a id="dlink" style="display: none;"></a>
       <table id="PanelExcel">
       <tr>
       <td>日期</td>
       <td>地点</td>
       <td>项目</td>
       <td >长途交通费</td>
       <td>市内交通费</td>
       <td>住宿费</td>
       <td>其他</td>
       <td>费用说明</td>
       <td>出差补助</td>
       <c:if test="${user.userlevel==2||user.userlevel==3||user.userlevel==4}">
<td>日报</td>
</c:if>

       </tr>
       <c:forEach items="${details}" var="detail">
       <tr>
<td>${detail.detaildata}</td>
<td>${detail.location}</td>
<td>${detail.project}</td>
<td>${detail.longfare}</td>
<td>${detail.shortfare}</td>
<td>${detail.hotelfare}</td>
<td>${detail.otherfare}</td>
<td style="width:150px;"><div style="overflow:auto;width:150px;height:30px;">${detail.faredescription}</div></td>
<td>${detail.travelallowance}</td>
<c:if test="${user.userlevel==2||user.userlevel==3||user.userlevel==4}">
<td style="width:150px;"><div style="overflow:auto;width:150px;height:30px;">${detail.daily}</div></td>
</c:if>
</tr>
</c:forEach>
       </table>

js代码

//jQuery HTML导出Excel文件(兼容IE及所有浏览器)
function HtmlExportToExcel(tableid) {
var filename = "报销";
if (getExplorer() == 'ie' || getExplorer() == undefined) {
HtmlExportToExcelForIE(tableid, filename);
}
else {
HtmlExportToExcelForEntire(tableid, filename)
}
}
//IE浏览器导出Excel
function HtmlExportToExcelForIE(tableid, filename) {
try {
var winname = window.open('', '_blank', 'top=10000');
var strHTML = document.getElementById(tableid).innerHTML;
winname.document.open('application/vnd.ms-excel', 'export excel');
winname.document.writeln(strHTML);
winname.document.execCommand('saveas', '', filename + '.xls');
winname.close();
} catch (e) {
alert(e.description);
}
}
//非IE浏览器导出Excel
var HtmlExportToExcelForEntire = (function() {
var uri='data:application/vnd.ms-excel;base64,',
template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head></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 }
document.getElementById("dlink").href = uri + base64(format(template, ctx));
document.getElementById("dlink").download = name + ".xls";
document.getElementById("dlink").click();
}
})()
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';
}
}
</script>

运行截图

当然了这个方法只适合简单了excel，如果是要使用一个模板该怎么弄呢，那就要使用freemarker了。具体如何我就不在这里细说。

JS导出html的table表格相关推荐

JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）
原文:JS组件系列--Bootstrap Table 表格行拖拽(二:多行拖拽) 前言:前天刚写了篇JS组件系列--Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的 ...
JS组件系列——Bootstrap Table 表格行拖拽
JS组件系列--Bootstrap Table 表格行拖拽原文:JS组件系列--Bootstrap Table 表格行拖拽前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一 ...
js导出excel(带边框以及文本样式)
js导出excel 假定有这样一个页面 <div class="content-table"><table lay-filter="queryTable ...
js table表格导出Excel 设置文件名称
一.table表格导出 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&qu ...
使用js代码将HTML Table导出为Excel
使用js代码将HTML Table导出为Excel的方法: 直接上源码 <html> <head> <meta http-equiv="Content-Type ...
js导出的xlsx无法打开_js-xlsx 导出表格至excel
引入js文件下载地址:链接: https://pan.baidu.com/s/1gdOl1HnTrM5mZgPgd5qeDQ 提取码: c8js 导入4个js文件 'js/xlsx.extendsc ...
table表格的增删查改、图片的处理、数据的导入导出
之前我们讲过一个数据库里面的增删查改和用jquer讲了一些简单的增删查改,没有做任何的判断,这次还是使用table的表格给它加一些条件的判断. 图表 1 图表 2 图表 3 图表1.图表2.图表3是h ...
vue使用Export2Excel.js导出表格自定义样式（表头加分割斜线）（笔记）
1.Export2Excel.js 文件内容 /* eslint-disable */ /** 导出Excel需要依赖 * npm install xlsx file-saver -S * npm i ...
Bootstrap Table表格分页的使用及分页数据（Excel）导出
####相关文档 Bootstrap Table官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ Bootstrap 中文网:http://www.b ...

JS导出html的table表格

JS导出html的table表格相关推荐

最新文章

热门文章