js 基于bootstrap导出表格数据到excel
基于bootstrap的导出表格数据到excel心得
如果有码友意外发现了我这文章和你出现了相同问题，那麻烦你赶紧给我点个赞分享一下，谢谢！好了，进入主题—
重要说明！！！
本js功能实现是基于bootstrap的modal模态框和bootstrap-table表格插件实现的，在Chrome和360浏览器上完美运行，但是ie和其他浏览器并无测试，有问题可以提出来，欢迎加入讨论！
先上效果图： 额，开玩笑的，我们公司是内网电脑，我并无法截图发到外网；还是手动代码说明吧，各位看官辛苦一下,还是一步一步说明吧
- 在相关页面上引入bootstrap.min.js、bootstrap.min.css、bootstrap-table.min.js、bootstrap-table.min.css文件（Vue的话自行参看官网如何配置）
//xx对应哪个路径下
<link href="xx/bootstrap.min.css" rel="stylesheet"/>
<link href="xx/bootstrap-table.min.css" rel="stylesheet"/>
<script src="xx/bootstrap.min.js"/>
<script src="xx/jQuery.js"/>
<script src="xx/bootstrap-table.min.js"/>
- 我这里是定义了一个弹窗（modal模态框）来加载table数据，其中这个table表格的存在是必需的，因为它定义了你传进来的数据格式
//xx对应哪个路径下
<div id="modal-id" class="modal hide fade in" style="display: none; " tabindex="-1" role="dialog" aria-labelledby="aria-name" aria-hidden="true">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>这是一个模态框标题</h3>
</div>
<div class="modal-body">
<h4>模态框中的文本</h4>
<p>你可以在这添加一些文本。</p>
//简单的一个表格，这个table表格的存在是必需的，因为它定义了你传进来的数据格式，
<table id="table-id" class="table-class">
<thead>
<th data-field="id">id</th>
<th data-field="name">xingming</th>
<th data-field="cantent">neirong</th>
</thead>
</table>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-success" id="check-id">唤醒活动(或者自定义为按钮，实现相应功能)</a>
<a href="#" class="btn" data-dismiss="modal">关闭</a>
</div>
</div>
- 有了表格，接下去就需要定义一些数据(假设获取到的数据是myData)填充到表格中了
//使用bootstrap-table插件
$("#table-id").bootstrapTable({
data:myData, //如果是直接的数据，就无需使用下面的url、method、sidePagination了
url: '/Home/GetDepartment', //请求后台的URL（*）
method: 'get', //请求方式（*）
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//传递参数（*）
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber:1, //初始化加载第一页，默认第一页
pageSize: 10, //每页的记录行数（*）
pageList: [10, 15, 20, 30], //可供选择的每页的行数（*）
search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true,
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId: "ID", //每一行的唯一标识，一般为主键列
showToggle:true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
columns: [{}]
});
-
以上如果myData数据（有对应的id、name、content字段）正确匹配，那应该是能够正常出现一个弹窗+表格了
-
我们设置模态框的确认按钮id为check-id，然后设置它的点击功能，开始导出表格数据到excel，由于配置问题，我们只能导出格式为xls的excel文件，所以这个也算需要小心点的
$("#check-id").click(function(){
exportExcel();
})
//整体函数我都是从各个网上copy的，大同小异了，不过我标注的地方希望能注意一下
var idTmr;
//获取浏览器类型
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 exportExcel(tableid,name,filename) {
if(getExplorer()=='ie')
{
var curTbl = document.getElementById(tableid);
//ActiveX插件支持，这是IE特有的，因此需要区分ie浏览器开来
var oXL = new ActiveXObject("Excel.Application");
var oWB = oXL.Workbooks.Add();
var xlsheet = oWB.Worksheets(1);
var sel = document.body.createTextRange();
sel.moveToElementText(curTbl);
sel.select();
sel.execCommand("Copy");
xlsheet.Paste();
oXL.Visible = true;
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);
oXL.Quit();
oXL = null;
idTmr = window.setInterval("Cleanup();", 1);
}
}
else
{
tableNotIEToExcel();
}
}
function Cleanup() {
window.clearInterval(idTmr);
CollectGarbage();
}
function tableNotIEToExcel(){
var oHtml = $("#table-id").outerHTML;
//获取table表格内容
var tableContent = $("#table-id").innerHTML;
//模拟创建a标签
oA = document.createElemet('a');
//这个模板的style="vnd.ms-excel.numberformat:@"很重要，用于格式化表格数据到excel可以分隔
var template = ''+tableContent +'
'
//使用Blob类定义数据类型，封装内容到excel可识别格式
var blobHTML = new Blob([template],{type:'application/vnd.ms-excel'});
//创建ObjectURL对象
oA.href = URL.createObjectURL(blobHTML);
oA.download = 'excel表格名称.xls';
//模拟a标签自动点击
oA.click();
//移除a标签
if(oA){
oA.parentNode.removeChild(oA);
};
}
- 至此基本完成了，我导出的数据和excel表格都有完整的分隔，因为过程中因为网上说的很多（5种方法）方法都尝试了一下，发现有些并不实在，使用遍历来定义的行列，这种方法看起来都觉得很麻烦。所有我这个写法只需要将获取的myData数据封装好，基本拿来就可以使用，相对便捷。最后再强调一下几个问题：
//table表格数据导出自动格式化，要求模板template的这个属性
//template模板
<html>
<head>
<mata chartset="utf-8"/>//这个chartset="utf-8"也需要注意一下，否则可能乱码
<style></style>
</head>
<body>
<table style="vnd.ms-excel.numberformat:@">+tableContent +</table>
</body>
</html>
你可能感兴趣的:(前端)