Element table 导出Excel重复数据

一、说明

使用Element组件的table实现固定列时，在前端页面导出table数据为Excel时，可以使用xlsx插件或bootstrap-table插件时，导出的数据会出现两份一样的数据。

二、这是什么原因呢？看下图：

从图中web代码中可见Element组件在实现table固定列时，会生成两个table，当我们导出Id下的table为excel时，就会导出两份数据。

三、解决方法

在导出Excel之前，将固定列的重复table删除，在导出完成后，再将固定列table拼接还原。下面使用xlsx插件实现，需引入xlsx插件和FileSaver插件。

 //判断有无固定列tablevar fixTable = document.querySelector('.el-table__fixed');if (fixTable ) {//有固定列，先删除固定列的Tabledocument.querySelector('#tb_user').removeChild(fixTable );//导出数据var elt = document.getElementById('tb_user');var wb = XLSX.utils.table_to_book(elt, {sheet: "Sheet JS"});return dl ? XLSX.write(wb, {bookType: type, bookSST: true, type: 'base64'}) :XLSX.writeFile(wb, fn || ('test.' + (type || 'xlsx')));//导出数据完成，恢复固定列document.querySelector('#tb_user').appendChild(fixTable );} else {//没有固定列table 直接导出Excelvar elt = document.getElementById('tb_user');var wb = XLSX.utils.table_to_book(elt, {sheet: "Sheet JS"});return dl ?XLSX.write(wb, {bookType: type, bookSST: true, type: 'base64'}) :XLSX.writeFile(wb, fn || ('test.' + (type || 'xlsx')));
}

使用bootstrap table实现，需要引入bootstrap系列插件包括tableExport插件：

 var fixTable = document.querySelector('.el-table__fixed');if (fixTable ) {document.querySelector('#tb_user').removeChild(fixTable );$('#tb_user').tableExport({type: 'excel',fileName: '导出文件名称',onCellHtmlData: function (cell, row, col, data) {return data;}});document.querySelector('#tb_user').appendChild(fixTable );} else {$('#tb_user').tableExport({type: type,fileName: fileName,onCellHtmlData: function (cell, row, col, data) {return data;}});}

Element table 导出Excel重复数据相关推荐

前端table导出excel表格方法汇总
在做一些后台管理系统中,经常会遇到table 组件:然后需要导出excel.开发中实现方法如下: 第一类:后端来做导出功能(后端做更合适) 1. 后端生成excel,返回一个url地址:前端直接利用浏 ...
bootstraptable导出excel独立使用_使用 EasyPOI 优雅导出Excel模板数据（含图片）
EasyPOI功能如同名字Easy,主打的功能就是容易,让一个没接触过POI的人员可以方便的写出Excel导出,Excel模板导出,Excel导入,Word模板导出.通过简单的注解和模板语言(熟悉的表 ...
使用EasyPOI导出Excel模板数据（含图片）
使用EasyPOI导出Excel模板数据(含图片) EasyPOI功能如同名字Easy,主打的功能就是容易,让一个没接触过POI的人员可以方便的写出Excel导出,Excel模板导出,Excel导入, ...
poi导出Excel文件下载数据
poi导出Excel文件下载数据 poi上传Excel文件批量的添加数据 : https://blog.csdn.net/kangshifu007/article/details/103149764 ...
表格导出计算机,电脑怎么导出excel表格数据-如何将百度指数数据导出到Excel表格...
系统没有导出功能,电脑表格里的数据有什么方法拿... 将网页表格数据导入到Excel中的方法: 第一步,将包括所需表格的网页打开,并按CTRL C把网址复制到剪贴板,以备下一步使用. 第二步,打开运行 ...
Element 根据勾选导出Excel表格数据
1. npm安装依赖包 npm install vue-json-excel 2.项目入口文件引进注册并且使用 import JsonExcel from 'vue-json-excel'Vue.co ...
html table导出excel 插入图片_前端 Table 用 JS 导出EXCEL(支持大量数据，保留报表格式) - pensive2019...
最近项目上,需要用到将网页上的table报表导出Excel.原先一直用,面对简单的数结构时只要简单的套用就能导出了,但是table结构相对复杂时,很难在组成一样结构,要花很多时间调:这时就想到在百度上 ...
ASP.NET MVC导出excel（数据量大，非常耗时的，异步导出）
要在ASP.NET MVC站点上做excel导出功能,但是要导出的excel文件比较大,有几十M,所以导出比较费时,为了不影响对界面的其它操作,我就采用异步的方式,后台开辟一个线程将excel导出到指 ...
Vue+Element导入导出Excel
一,安装 npm install -S file-saver xlsx npm install -D script-loader 二,导入Excel 1,Element 上传控件 <el-upl ...

Element table 导出Excel重复数据

一、说明

二、这是什么原因呢？看下图：

三、解决方法

Element table 导出Excel重复数据相关推荐

最新文章

热门文章