前端实现页面表格导出

当复杂的表格，有合并列或行的表格，下载时采用前端根据获取dom节点内容下载

页面表格如下：

后端数据如下：

rows:[
{"2022-01":"0","2022-02":"0","2022-03":"-900","2022-04":"0","考核内容|月份":"产品不良批次"},

{"2022-01":"0","2022-02":"0","2022-03":"0","2022-04":"0","考核内容|月份":"产品不良总数"}, {"2022-01":"0","2022-02":"0","2022-03":"0","2022-04":"0","考核内容|月份":"批次不合格率"}, {"2022-01":"0","2022-02":"57","2022-03":"26","2022-04":"0","考核内容|月份":"产品不合格率"},
{"2022-01":"0","2022-02":"0","2022-03":"-900","2022-04":"0","考核内容|月份":"理货不良批次"},

{"2022-01":"0","2022-02":"0","2022-03":"0","2022-04":"0","考核内容|月份":"理货不良总数"}, {"2022-01":"0","2022-02":"0","2022-03":"0","2022-04":"0","考核内容|月份":"批次不合格率"}, {"2022-01":"0","2022-02":"57","2022-03":"26","2022-04":"0","考核内容|月份":"产品不合格率"},
{"2022-01":"0","2022-02":"0","2022-03":"0","2022-04":"0","考核内容|月份":"入库总批次"},
{"2022-01":"0","2022-02":"0","2022-03":"0","2022-04":"0","考核内容|月份":"入库总数量"},
{"2022-01":"0","2022-02":"57","2022-03":"26","2022-04":"0","考核内容|月份":"不良总批次"},
{"2022-01":"0","2022-02":"0","2022-03":"-900","2022-04":"0","考核内容|月份":"不良品总数"},
{"2022-01":"0","2022-02":"0","2022-03":"0","2022-04":"0","考核内容|月份":"出勤人数"},
{"2022-01":"0","2022-02":"0","2022-03":"0","2022-04":"0","考核内容|月份":"人均检出不良批次"},
{"2022-01":"0","2022-02":"57","2022-03":"26","2022-04":"0","考核内容|月份":"人均检出不良总数"},
],
headTab1:["考核内容|月份", "2022-01", "2022-02", "2022-03", "2022-04"],//表头数据

页面HTML部分

<div class="makeBar"><div class="item"><a href="#" id="daochu"><el-button type="primary">导出</el-button></a></div>
</div>
<div class="body" id="export"><el-tablestyle="width: 100%;min-width: 1000px" border:span-method="objectSpanMethod":data="rows" :header-cell-style='HeaderStyle'><el-table-columnalign="center"label="不良类型"><template slot-scope="scope">{{scope.$index < 4?'产品不良':(scope.$index < 8?'理货不良':'合计')}}</template></el-table-column><template v-for="(item2,index2) in headTab1"> <el-table-column :label="item2" :key="index2" align="center"><template slot-scope="scope">              <span>{{scope.row[item2]}}</span></template></el-table-column></template></el-table>
</div>

合并行代码js

// 合并行
objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0) {if(rowIndex === 0 || rowIndex === 4) {return {rowspan: 4,colspan: 1};}else if(rowIndex === 8){return {rowspan: 7,colspan: 1}}else{return {rowspan: 0,colspan: 0};}}
}

先调用接口，获取到表格数据后，如下：

this.$nextTick(()=>{var html = `<style>.tit{font-size:16px}table {border-collapse: collapse;border: 1px solid #000;}th,tr,td{border: 1px solid #000;font-size: 16px;}</style>` + document.getElementById("export").outerHTML + "";var arr = html.split('<th class="gutter" style="width: 0px; display: none;"></th>')html = arr.join('')// 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象var blob = new Blob([html], { type: "application/vnd.ms-excel" });var a = document.getElementById("daochu");// 利用URL.createObjectURL()方法为a元素生成blob URLa.href = URL.createObjectURL(blob);// 设置文件名，目前只有Chrome和FireFox支持此属性a.download = "不良统计表.xls";
})

上述样式添加是因为导出时，表格的线条消失了，所以手动添加border,这样前端点击导出按钮就可以导出跟页面一样的表格了

前端实现页面表格导出相关推荐

【前端html页面数据导出为pdf文件】
[前端html页面数据导出为pdf文件] 文前白话在网页端导出 Excel 数据表格保存本地前端html页面数据导出为pdf文件文前白话项目需要,将网页端查询的数据结果与数据分析结果导出文件, ...
将页面表格导出为excel并下载
将页面表格导出为excel并下载的方式有很多, 本次介绍的是表格div的下载. 这种方式很简单,不需要去创建excel文件,也不需要创建工作簿,然后一点一点的填写数据.只需要将页面的div中的表格下载 ...
xlsx插件将页面表格导出为xlsx文件格式简单案例
目录前言插件安装案例一代码案例一效果案例二代码案例二页面展示案例二导出效果: 案例二引入代码文件dist_xlsx.full.min.js Git地址前言此案例未涉及到表格样式,只是 ...
js导出变量 vue_vue.js前端实现excel表格导出和获取headers里的信息
前段时间写过一篇文章基于element实现后台管理系统,并提到excel表格导出功能,可能描述不是很详细,现在单独整理列出. 后端提供的接口: // 下载分拣列表 export function ge ...
js导出html页面到excel表格,JavaScript将页面表格导出为Excel的具体实现
导出Excel var idTmr = ""; function killExcelProcess(appExcel_){ appExcel_.Quit(); appExcel_ ...
JavaScript将页面表格导出为Excel
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML><HEAD& ...
html页面表格导出到excel总结
转载:http://www.cnblogs.com/liuguanghai/archive/2012/12/31/2840262.html <table id="tableExcel& ...
php页面表格导出excel表格数据类型,php页面表格导出excel表格数据类型-php导出excel是不是导出整个表的？可不可以导出指......
php 怎么把数据导出到excel表格昨天项目里有个新需求,客户希望把一些数据能导出成为Excel表格,刚开始用PHP原生输入Excel表格,发现效果不是很理想,于是找到一个比较著名的库:PHPEx ...
如何将html页面导出到excel,html页面表格导出到excel总结(示例代码)
html 表格导出道Excel 列标题1 列标题2 类标题3 列标题4 列标题5 aaa bbb ccc ddd eee AAA BBB CCC DDD EEE FFF GGG HHH III JJJ ...

前端实现页面表格导出

前端实现页面表格导出相关推荐

最新文章

热门文章