vue+element导出表格成xlsx文件功能第二种方法导出，表格底部有合计的

65 阅读 0 评论 43 点赞

我是靠谱客的博主默默小松鼠，最近开发中收集的这篇文章主要介绍vue+element导出表格成xlsx文件功能第二种方法导出，表格底部有合计的，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

template中

<el-button icon="el-icon-document" type="primary" size="small" @click="exportTable">导出</el-button>
<el-table
id="testTable1"
:height="tabHeight"
border highlight-current-row :data="data1" v-loading="tabLoading1" ref="multipleTable1"
:row-style="rowStyle" // 这是用来设置每行样式的
>
<!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
<el-table-column type="index" align="center" label="序号"></el-table-column>
<el-table-column label="维修编号" :show-overflow-tooltip="true" prop="repairNo" min-width="100"></el-table-column>
</el-table-column>
<!-- <el-table-column label="班组" :show-overflow-tooltip="true" prop="classGroup" >
<template slot-scope="scope"> // 如果返回的是数字需要变成文字
<span v-if="scope.row.classGroup === '1'">甲</span>
<span v-else-if="scope.row.classGroup === '2'">乙</span>
<span v-else-if="scope.row.classGroup === '3'">丙</span>
<span v-else>丁</span>
</template>
</el-table-column> -->
<el-table-column label="操作" width="180" fixed="right" type="noFilter" v-if="showClum">
<template slot-scope="scope">
<el-button icon="el-icon-view" type="primary" size="small" @click="showRowData(scope.row)">详情</el-button> // 这个方法忽略不写，需要的自己写
</template>
</el-table-column>
</el-table>

data中

data () {
data1: [],
showClum: true // 用来显示操作列的，true为显示，false为隐藏
}

methods中

rowStyle ({row, index}) {
return 'height: 24px' // 表格每行高度为24px;
// if (index === 3) {
// return 'height: 24px' // 表格第四行高度为24px,index为0为第一行
// }
// if (row.id === '20200101') {
// return 'height: 24px' // 查找到表格某行中id为'20200101'的那行的高度为24px
// }
// 导出
exportTable: function () {
// let _this = this;
// _this.showClum = false;
// let doIt = new Promise(function (resolve, reject) {
//
_this.handleDownloadExcelForElTable('testTable1', '信息数据导出')
//
resolve('success')
// })
// doIt.then(() => {
//
_this.showClum = true;
// })
let _this = this;
_this.showClum = false;
// 不想把操作列也导出来，那就隐藏操作列
_this.handleDownloadExcelForElTable('testTable1', '信息数据导出')
setTimeout(() => {
_this.showClum = true;
}, 2000);
},
},

这是法一啦，还有个法二

第二种方法导出，表格底部有合计的

template中

<el-button type="primary" size="small" @click="doExport">导出</el-button>
<div style="overflow: hidden; padding-top: 0;" id="power_table" v-loading="tableLoading"
element-loading-text="拼命操作中">
<div class="ytg-ps-title" style="float: left;position: relative; color: #0a6cd6">资材备件归集</div>
<el-table
ref="filterTable"
:bigDataShow="bigDataShow"
:data="tableData"
height="600"
border
style="width: 100%"
:header-cell-style="headerStyle"
highlight-current-row
@current-change="handleCurrentChange"
:summary-method="summary"
show-summary
@filter-change="filterChange"
@selection-change="selChange"
>
<el-table-column
prop="date"
label="序号"
width="40"
type="index"
align="center"
>
</el-table-column>
<el-table-column
type="selection"
width="80"
align="center"
>
</el-table-column>
<el-table-column
prop="out_bill_no"
label="出库单号"
width="130"
show-overflow-tooltip
align="left"
sortable
>
</el-table-column>
<el-table-column
prop="audit_flg"
label="审核标志"
width="80"
align="center"
:filter-method="filterColumn"
sortable
show-overflow-tooltip
>
<template slot-scope="{row}">
<span :class="{N:row.audit_flg !== '1', Y:row.audit_flg === '1'}">{{ row.audit_flg === '1' ? '审核' : row.audit_flg === '0' ? '未审核' : '' }}</span>
</template>
</el-table-column>
</el-table>
</div>

data中:

data () {
tableLoading: false,
tableData: [],
bigDataShow: [4, 28] // 这是公司的大表控件，假如一共有400条数据，每次只显示4*28条数据
}

methods中

methods: {
// 摊销表头样式控制函数：
headerStyle () {
return 'background-color: #F5F7FA; color: #000';
},
// 点击当前行：点击表格中某一行时
handleCurrentChange (curRow) {
console.log(curRow);
},
// 给某列底部合计
summary ({columns, data}) {
let obj = {
quantity_value: 7,
price_value: 8,
amount_value: 9
};
console.log('columns');
const sums = [];
sums[0] = '合计';
sums[1] = `共${this.total}条`;
let sum = 0;
let values, allStr;
for (let key in obj) {
values = data.map(item => item[key]);
// 拿到列数据后：1.判断数据中是否存在有值为数字：
allStr = values.every(item => isNaN(item));
if (!allStr) {
// 存在数据为数字
sum = values.reduce((prev, current) => {
if (!isNaN(current)) {
// 为数字：
return Number(prev) + Number(current);
} else {
console.log(current);
return prev;
}
}, 0);
sums[obj[key]] = sum.toFixed(3);
}
}
return sums;
},
// 这个方法是用来过滤表格中数据的，根据表格的prop属性来过滤，下面有的就可以过滤
filterChange (filters) {
var _this = this;
// 设置过滤数据 setFilterDatas
_this.setFilterDatas(this.$refs.filterTable.columns, _this.$refs.filterTable.tableData,
['srot_name', 'machine_name',
'prd_num', 'valid_flg', 'audit_flg'
], {
audit_flg: {'1': '已审核', '0': '未审核'},
valid_flg: {'1': '有效', '0': '无效'}
}
);
},
// 复选框选中后触发：
selChange (sels) {
console.log(sels);
},
// 导出方法来啦。。。。。。。
doExport () {
if (this.tableData.length === 0) {
this.$message.warning('表格无数据不能导出');
return true;
}
this.tableLoading = true;
setTimeout(() => {
let data = this.tableData;
this.tableData = [];
// 将大表控件bigDataShow改成[10000, 28];
setTimeout(() => {
this.bigDataShow = [10000, 28]; // 显示10000*28把表格全部数据显示出来方便把全部数据导出
this.tableData = data;
setTimeout(() => {
this.tableLoading = false;
this.doExport2();
}, 0)
}, 0);
}, 0);
// this.bigDataShow = [10000, 28];
},
// 导出
doExport2 () {
// 将固定列去掉，否则导出的element-ui表格会有两个，因为element-ui固定列的实现原理是表格上面再套一层表格
this.$nextTick(() => {
let table = document.querySelector('#power_table .el-table');
let header = document.querySelector('#power_table .el-table .el-table__header');
let body = document.querySelector('#power_table .el-table .el-table__body');
// let footer = document.querySelector('#power_table .el-table .el-table__footer'); // 没有合计就不要，不然会出错，找不到footer,报错，下面的执行不了
let oTd = document.querySelectorAll('#power_table .el-table td');
let oTh = document.querySelectorAll('#power_table .el-table th');
let tjTd = document.querySelectorAll('#power_table .el-table .el-table__footer td[rowspan="1"]');
// 设置表格的border属性值为1，解决表格导出后无边框问题
header.border = '1';
body.border = '1';
footer.border = '1';
for (let item of Array.from(oTd)) {
// item.style.height = '27px'
item.setAttribute('style', 'height:27px;mso-number-format:"@"');
}
for (let item of Array.from(oTh)) {
item.style.height = '27px'
}
// 处理表格底部合计统计样式问题，
// for (let item of Array.from(tjTd)) {
//
item.setAttribute('rowspan', '2');
// }
// 解决右边多处一个单元格：
// <th class="gutter" style="width: 10px; height: 27px;"></th> (有滚动条)
// <th class="gutter" style="width: 0px; display: none; height: 27px;"></th> (无滚动条)
let ex = '<th class="gutter" style="width: 10px; height: 27px;"></th>';
let ex2 = '<th class="gutter" style="width: 0px; display: none; height: 27px;"></th>';
ex = new RegExp(ex, 'g').test(table.outerHTML) ? ex : ex2;
let bd = table.outerHTML.replace(new RegExp(ex, 'g'), '');
bd = bd.replace('正在整理数据', '');
let html = '<html><head><meta charset="utf-8" /></head><body>' + bd + '</body></html>'
let blob = new Blob([html], {type: 'application/vnd.ms-excel'});
let link = document.createElement('a');
link.download = `资材备件归集${this.prd_num}导出.xls`;
link.href = URL.createObjectURL(blob);
// document.body.appendChild(link);
link.click()
// 导出之后将a标签移除掉，并将border属性设置为最初的0
// document.body.removeChild(link)
header.border = '0';
body.border = '0';
// footer.border = '0'; 如果没有合计这句和上面那句let footer也要隐藏
for (let item of Array.from(oTd)) {
item.style.height = ''
}
for (let item of Array.from(oTh)) {
item.style.height = ''
}
this.bigDataShow = [4, 28]; // 再把这些数据变成少量数据，反应快，如果全部把数据显示出来数据加载过慢
// for (let item of Array.from(tjTd)) {
//
item.setAttribute('rowspan', '1');
// }
})
},
}