vue中el-table前端如何导出excel数据表格
更新时间：2024年07月15日 10:46:12 作者：~张小八~
这篇文章主要介绍了vue中el-table前端如何导出excel数据表格,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
一、el-table为正常时，导出方法如下：
1.添加导出按钮
<el-button class="greenLinearbg dc" size="small" @click="webExportTotalExcel()" v-if="totalBillShow">导出</el-button>
2.导出方法
// web导出汇总单excel
webExportTotalExcel(){
// 获取表格数据
//const tableData = this.userTotalList;
const tableData = this.userTotalList.map(row => { //创建一个新的数组，处理null值
return Object.keys(row).reduce((acc, key) => {
acc[key] = row[key] === null ? '' : row[key];
return acc;
}, {});
});
// 构建 Excel 文件内容
let excelContent = `<html><head><meta charset="UTF-8"></head><body><table border="1">`;
// 添加表头
excelContent += '<tr>';
for (const column of this.$refs.tableRef.columns) {
if (column.property) {
excelContent += `<th>${column.label}</th>`;
}
}
excelContent += '</tr>';
// 添加表格数据
for (const row of tableData) {
excelContent += '<tr>';
for (const column of this.$refs.tableRef.columns) {
if (column.property) {
excelContent += `<td>${row[column.property]}</td>`;
}
}
excelContent += '</tr>';
}
// 构建完整的 Excel 文件内容
excelContent += '</table></body></html>';
// 创建 Blob 对象
const blob = new Blob([excelContent], { type: 'application/vnd.ms-excel' });
// 创建链接并触发下载
const link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = '汇总单.xlsx'; // 设置默认文件名
link.style.display = "none";
document.body.appendChild(link);
link.click();
window.URL.revokeObjectURL(link.href);
},二、el-table中列为循环数据时，如下图所示：
导出方法如下：
1.导出按钮：
<el-button class="greenLinearbg dc" size="small" @click="webExportHistoryExcel('','历史账单','el-table__fixed-right',0,'message')" v-if="historyBillShow">导出</el-button>2.导出方法为：
// web导出历史账单excel
webExportHistoryExcel(id,excelName,className,number=0){
const loading = this.$loading({
lock: true,
text: '数据导出中',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
const columns = this.$refs.message.columns,outputColumns=[];
for(let i=0,len=columns.length;i<len;i++){
if('label' in columns[i]){
if('prop' in columns[i])
outputColumns.push(columns[i].prop);
else if('slot' in columns[i] && columns[i].slot!='action' && columns[i].label!='操作')
outputColumns.push(columns[i].slot);
}
}
if(this.$refs.message.selectRow=='all'){
request({
url:'/system/nonResidentYhzd/selectYhzdTable',
method:'post',
data:{pageNum:1,pageSize:this.queryParams.total}
}).then(response => {
ExportUtils.exportExcel(id,excelName,'',className,number,this.$refs.message.selectRow,response.rows,outputColumns);
loading.close();
});
}
else{
ExportUtils.exportExcel(id,excelName,'',className,number,this.$refs.message.selectRow,this.$refs.message.selectList,outputColumns);
loading.close();
}
},到此这篇关于vue中el-table前端导出excel数据表格的文章就介绍到这了,更多相关vue el-table导出excel数据表格内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
递归组件是Vue中用于渲染复杂嵌套结构的强大工具,通过组件引用自身来简化代码,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧2024-12-12
vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转,下面这篇文章主要给大家介绍了关于vue路由传参方式的方式总结及获取参数的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
moment.js是一款现在对时间处理的强大的函数，这篇文章主要介绍了Vue 日期获取的示例代码，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-01-01
这篇文章主要给大家总结介绍了关于vue工程师必会封装的埋点指令思路知识,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2021-12-12
这篇文章主要为大家详细介绍了如何基于Vue2实现数字纵向滚动效果,从而达到显示计时器滚动效果,感兴趣的小伙伴可以跟随小编一起学习一下2024-03-03
这篇文章主要为大家介绍了如何通过URL来实现在Vue中存储业务状态实用技巧，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-10-10
这篇文章主要介绍了Vue-组件自定义事件的绑定和解绑，文中有详细的图文实例，对学习或工作有一定的参考价值，需要的小伙伴可以阅读下2023-05-05
这篇文章主要为大家详细介绍了vue实现商城上货组件简易版，50行js代码实现效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要介绍了vue-router 起步步骤详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
VUE2旧项目重新安装依赖后@vue/compiler-sfc编译报错问题
在VUE2旧项目中重新安装依赖后,如果遇到@vue/compiler-sfc编译报错,首先需要检查package.json文件中的Vue版本是否升级到2.7版本,2.7版本的编译插件不再支持/deep/这种样式穿透,版本^和~的区别在于^只能锁住第一位数2025-01-01
最新评论