vue el-table导出数据表,不含有操作列和前面那个空白的checkbox

简介: vue el-table导出数据表,不含有操作列和前面那个空白的checkbox
/**
 *  @this file function: 此文件是用于文件相关的助手类
 *  @author: Cll
 *  @Date: 2019/11/4 0004 10:58
 *
 */
import XLSX from 'xlsx'
import FileSaver from 'file-saver'
import {TypeHelper} from "@/helper/typeHelper/TypeHelper";
import {TimeHelper} from "@/helper/timeHelper/TimeHelper";
export class FileHelper {
    /**
     *
     * 导出表格文件
     * @param tableName 导出的文件名称
     * @param elementName 节点的类
     * @returns {*}
     */
    static exportTableToXSLX(tableName = '', elementName) {
    // 判断传入进来的表格名称是否为空,为空的话用当前的时间戳
        if (TypeHelper.isEmpty(tableName)) {
            tableName = TimeHelper.timestamp();
        }
// 获取当前table的dom,必须要用clone,如果不可隆的话会导致你现有表中的表格发生改变
        let tableDom = document.querySelector(elementName).cloneNode(true);
        let tableHeader = tableDom.querySelector('.el-table__header-wrapper');
        let tableBody = tableDom.querySelector('.el-table__body');
        tableHeader.childNodes[0].append(tableBody.childNodes[1]);
        let headerDom = tableHeader.childNodes[0].querySelectorAll('th');
        // 移除左侧checkbox的节点
        if (headerDom[0].querySelectorAll('.el-checkbox')) {
            headerDom[0].remove();
        }
        for (let key in headerDom) {
            if (headerDom[key].innerText === '操作') {
                headerDom[key].remove();
            }
        }
        // 清理掉checkbox 和操作的button
        let tableList = tableHeader.childNodes[0].childNodes[2].querySelectorAll('td');
        for (let key = 0; key < tableList.length; key++) {
            if (tableList[key].querySelectorAll('.el-checkbox').length > 0 || tableList[key].querySelectorAll('.el-button').length > 0) {
                tableList[key].remove();
            }
        }
        // 获取web的节点
        let webBook = XLSX.utils.table_to_book(tableHeader);
        // 把当前的book节点写入XLSX中
        let webOut = XLSX.write(webBook, {bookType: 'xlsx', bookSST: true, type: 'array'});
        try {
            FileSaver.saveAs(new Blob([webOut], {type: 'application/octet-stream'}), tableName + '.xlsx');
        } catch (e) {
            if (typeof console !== 'undefined') console.log(e, webOut)
        }
        return webOut
    }
}


相关文章
|
1天前
|
JSON JavaScript 前端开发
vue尚品汇商城项目-day00【项目介绍:此项目是基于vue2的前台电商项目和后台管理系统】
vue尚品汇商城项目-day00【项目介绍:此项目是基于vue2的前台电商项目和后台管理系统】
6 1
|
2天前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
9 2
|
2天前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【3.项目路由的分析】
vue尚品汇商城项目-day01【3.项目路由的分析】
6 1
|
2天前
|
JavaScript 前端开发 数据安全/隐私保护
vue尚品汇商城项目-day01【5.路由组件的搭建】
vue尚品汇商城项目-day01【5.路由组件的搭建】
5 0
vue尚品汇商城项目-day01【5.路由组件的搭建】
|
1天前
|
JSON 缓存 JavaScript
vue尚品汇商城项目-day01【1.vue-cli脚手架初始化项目生成文件的介绍】
vue尚品汇商城项目-day01【1.vue-cli脚手架初始化项目生成文件的介绍】
6 0
|
1天前
|
JavaScript
vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】
vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】
7 0
|
2天前
|
JavaScript
vue尚品汇商城项目-day01【6.Footer组件的显示与隐藏】
vue尚品汇商城项目-day01【6.Footer组件的显示与隐藏】
7 0
|
2天前
|
JavaScript 数据格式
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
16 1
|
3天前
|
JavaScript
vue尚品汇商城项目-day03【23.把首页当中的轮播图拆分为一个共用的全局组件】
vue尚品汇商城项目-day03【23.把首页当中的轮播图拆分为一个共用的全局组件】
10 2
|
3天前
|
JavaScript 索引
vue尚品汇商城项目-day04【25.面包屑处理关键字】
vue尚品汇商城项目-day04【25.面包屑处理关键字】
15 1