vue+elementUI，el-table数据导出Excel和解决导出表格有重复数据

电玩女神 2022-09-09 02:14 369阅读 0赞

1：安装依赖 xlsx 和 file-saver

npm install --save xlsx file-sav

2：页面引入

import FileSaver from 'file-saver'
    import XLSX from 'xlsx'

3：methods中引入方法

注：el-table使用了fixed属性来让某一列固定

el-table\_\_fixed-right是固定列（操作列）的类名   exportTable是el-table的id名称

exportExcel(){
         let excelTab = document.querySelector(".el-table__fixed-right");
         let webText;
         // 判断要导出的节点是否有fixed表格列 有 则转换excel时先将该dom移除，然后append回去
         if(excelTab){
              webText = XLSX.utils.table_to_book(document.querySelector("#exportTable").removeChild(excelTab));
              document.querySelector("#exportTable").appendChild(excelTab);
         }else{
              webText = XLSX.utils.table_to_book(document.querySelector("#exportTable"));
         }
         let wbout = XLSX.write(webText,{bookType:'xlsx', bookSST:true, type:'array'})
         try{
            FileSaver.saveAs(new Blob([wbout],{type:'application/octet-stream'}),'导出表格名称.xlsx');
         } catch (e){
            if (typeof console !== 'undefined') console.log(e, wbout)
         }
         return wbout;
    },

el-table\_\_fixed-right类名图片 ![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5qCR5rSe6I-H5YeJ_size_20_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5qCR5rSe6I-H5YeJ_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/d4ea05bdf01d44a482f8637c6742cae3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，369人围观）

还没有评论，来说两句吧...

相关阅读

相关数据导出Excel

/// <summary> /// 导出数据到excel /// </summary> ///

偏执的太偏执、/ 2023年12月09日 07:41/ 0 赞/ 205 阅读

相关 java 数据导出Excel java POI 导出数据Excel

java 数据导出Excel java POI 导出数据Excel 一、说明 1、使用Apache poi 实现java中导

墨蓝/ 2023年07月20日 08:25/ 0 赞/ 128 阅读

相关 vue+elementUI，el-table数据导出Excel和解决导出表格有重复数据

1：安装依赖 xlsx 和 file-saver npm install --save xlsx file-sav 2：页面引入 import FileS

电玩女神/ 2022年09月09日 02:14/ 0 赞/ 370 阅读

相关导出excel数据

<? /\ \@author:dudj \@time:20160331 \@effect:通过按钮实现数据库数据的导出 \/ include "connection

青旅半醒/ 2022年07月15日 07:30/ 0 赞/ 217 阅读

相关导出 excel表格（数据、echarts图片）

/\\ \ @Description：导出 \ @author: liuc \ @since: 2016年4月14日上午10:36:39 \/

不念不忘少年蓝@/ 2022年06月16日 08:13/ 0 赞/ 274 阅读

相关使用poi实现导出excel数据表格

最近项目中要求技术实现导出商品订单的excel表格数据,功能虽然实现了,但是依旧两个小的技术点,没有实现 1,中文文件名称的编写,乱码后,数据是无法显示的. 2,条件查询时

布满荆棘的人生/ 2022年06月02日 07:15/ 0 赞/ 313 阅读

相关 Java实现数据Excel表格导出

/\\ \ 创建excel文档， list 数据 \ \ @param keys \ list中map的key数组集合 \

缺乏、安全感/ 2022年04月04日 14:58/ 0 赞/ 314 阅读

相关导出数据到Excel表格

开发工具与关键技术：Visual Studio 作者：肖广斌撰写时间：2019年4月11日在MVC里，我们可以把数据库里的数据导入到Excel表格里，然后再保存到

骑猪看日落/ 2022年02月20日 15:09/ 0 赞/ 375 阅读

相关 Excel表格导出

开发工具与关键技术：MVC 作者：文泽钦撰写时间：2019年5月25日员工数据导出到excel表格，导出前要对数据处理，因为一个项目可以导出的数据比较多，在导出前

梦里梦外;/ 2022年01月27日 06:21/ 0 赞/ 514 阅读

相关 java导入/导出excel表格数据

开发中经常会涉及到数据导入、导出到excel表格，所以下面介绍下操作excel的方式：目前操作excel表格有两个框架：apache poi 和jexcelapi jxl,

浅浅的花香味﹌/ 2022年01月09日 19:23/ 0 赞/ 450 阅读