今天项目用到了导出table表格,但表头有点特殊,多个合并的单元格。
搜索了半天,发现有博主使用
xlsx.full.min.js做过此类功能,使用的是vue+elementUI,特在该基础上改进和封装了一下,兼容普通HTML的js引入。
包含
xlsx.full.util.js
导出前页面:

导出后的excel文件:

文章地址:https://blog.csdn.net/seeflyliu/article/details/109476804
案例地址:http://www.seefly.top:4488/xlsx/sheet.html
以下是对博主的案例进行查看,所需要的资源和html代码:
1、打开案例地址,复制 里面的,以及里面的代码,到本地html;
2、引入elementUI
https://unpkg.com/element-ui/lib/theme-chalk/index.css
https://unpkg.com/element-ui/lib/index.js
3、引入vue
https://cdn.jsdelivr.net/npm/vue/dist/vue.js
4、引入插件js
http://www.seefly.top:4488/xlsx/xlsx.full.min.js
该js地址是博主提供的,如果无法访问了,请自行度娘,或在文末下载资源~
5、打开本地html,看到效果已经出来了。
仅需下载插件js,以及封装后的js,然后引入封装后的js即可。
使用案例:
<button class="layui-btn" onclick="exportTable()">导出button>
<script type="text/javascript" src="../js/xlsx.full.util.js">script>
function exportTable(exportTitles, data){
if (!window.xlsxFull)
window.xlsxFull = new XlsxFull();
var widths = [ 160, 100, 100 ]; //设置单元格宽度(可忽略)
$.each(minew.stockList, function() {
widths.push(80);
widths.push(80);
});
window.xlsxFull.exportData(exportTitles, data, {
title : '导出原料库存',
widths : widths
});
}
其中,data即为普通列表数据,titles为类似树形数组,如下:
[
{
name: '姓名',
prop: 'name',
},
{
name: '专业技能',
child: [
{
name: 'JavaScript',
prop: 'js'
},
{
name: 'CSS',
prop: 'css'
}
}
]
可见child可以无限扩展~
https://download.csdn.net/download/qq_26599807/86264255
