vue导出elementui表格为excel表格 删除操作列按钮

页面导入js文件

import htmlToExcel from "../../../../common/js/htmlToExcel";

导出按钮事件

    // 下载表格按钮操作
    exportExcel() {
      htmlToExcel.getExcel("等位基因信息表");
    },

js文件代码

import FileSaver from "file-saver";
import XLSX from "xlsx";

export default class fileSave {
    /**
     * 导出Excel文件
     * @param {*} name  文件名
     */
    static getExcel(name) {
        if (!name || name == '') {
            name = '等位基因数据表';
        }
        /* 从表生成工作簿对象 */
        //var wb = XLSX.utils.table_to_book(document.querySelector("#outLTable"));
        let tableDom = document.querySelector("#outLTable").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').length > 0) {
            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' }), name + '.xlsx');
        } catch (e) {
            if (typeof console !== 'undefined') console.log(e, webOut)
        }
    }

}
  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值