解决vue表格导出时数据重复

如果 element-ui的table 使用了 fixed 属性固定列，导出表格时会出现导出两次的问题，在导出的表格中会有重复数据，是因为在 table 中有两个 table 标签，本文章提出解决办法

在main.js中

// vue中导出excel表格模板
import FileSaver from 'file-saver'
import XLSX from 'xlsx'Vue.prototype.$FileSaver = FileSaver //设置全局
Vue.prototype.$XLSX = XLSX //设置全局

在.vue文件中

<el-table-column prop="id"  label="单号" fixed="left"></el-table-column>
<el-table-column label="操作" width="120" fixed="right"></el-table-column>

// 表格导出方法
exportExcel() {let tables = document.getElementById('out-table').cloneNode(true) // 重点tables.removeChild(tables.querySelector(".el-table__fixed")) // 重点table.removeChild(table.querySelector(".el-table__fixed-right")) // 重点let table_book = this.$XLSX.utils.table_to_book(tables)var table_write = this.$XLSX.write(table_book, {bookType: 'xlsx',bookSST: true,type: 'array',})try {this.$FileSaver.saveAs(new Blob([table_write], { type: 'application/octet-stream' }),'导出表格名.xlsx')} catch (e) {if (typeof console !== 'undefined') console.log(e, table_write)}return table_write}

以下是对js中重点代码解析

// 拷贝一个table，否则直接删除会删除页面中的表格
let tables = document.getElementById('out-table').cloneNode(true)
// 因为element-ui的表格的fixed属性导致多出一个table，会下载重复内容，这里删除掉
tables.removeChild(tables.querySelector(".el-table__fixed")) // fixed和fixed="left"都是用这个
table.removeChild(table.querySelector(".el-table__fixed-right")) // fixed="right"用这个

修改前：

修改后：

解决vue表格导出时数据重复相关推荐

vue重复路由_解决vue路由name同名,路由重复的问题
在项目中,想让路由后缀为空,或者index的时候,都跳转到路由为index的页面,于是在router中如下配置 routes: [{ path: '/', name: 'index', compone ...
谷歌浏览器Chrome,TableExport.js 导出时数据量过大报网络错误的问题
谷歌浏览器Chrome,TableExport.js 导出时数据量过大报网络错误的问题之前项目里面遇到一个问题,谷歌浏览器下,数据量过大时报网络错误,下载失败,弄了很久都没找到解决的方法,偶然翻到一 ...
如何完美解决Sqoop导入导出MySQL数据错位问题
我发现小伙伴们在使用Sqoop把数据从MySQL导入到Hive的过程中经常会遇到数据错位的问题,虽然最后都是通过添加参数的方法来解决这个问题,但是我认为这并不是一个完美的解决方案,所以花了一点时间研究 ...
解决vue 提交日期格式数据，时间出现时区差的问题
解决vue 提交日期格式数据,时间出现时区差的问题一.错误源: 在自定义create_time ,进行前端vue 向后端django 传入数据时,发现 {'create_time': [ErrorD ...
vue计算多列和_解决vue 表格table列求和的问题
最近在给朋友做一个项目,因为是B端,所以少不了表格. 本身就用了element-ui,但是订单管理有个需求使用element-ui table组件实现不了,只能退而求其之用了原生的table,功能是几 ...
php输出json到表格,Vue如何导出json数据到Excel电子表格方法
本文主要介绍了Vue导出json数据到Excel电子表格的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助到大家. 一.安装依赖(前面基本一样) npm install file- ...
vue中导出json数据为excel表格并保存到本地
继我上次成功利用vue和elemen把excel的数据导入至前端vue,因为excel表中的数据有些必填项没有填写或者填写错误(比如写错字)所以就要将没有成功导入的数据导出成一份excel表并保存至本 ...
vue表格导出到Excel
步骤一:安装依赖 npm install --save xlsx file-saver 步骤二:在放置需要导出功能的组件中引入相关组件 import FileSaver from 'file-save ...
mysql三表查询数据重复_解决mybatis三表连接查询数据重复的问题
此问题的产生,主要是数据库的字段名一样导致三张表 DOCTOR JOB OBJECT 有问题的查询语句和查询结果是: SELECT d.*,j.*,o.* from (select d.*,rown ...

解决vue表格导出时数据重复

解决vue表格导出时数据重复相关推荐

最新文章

热门文章