[JavaScript知识库]记录导出el表格为Excel文件

import FileSaver from "file-saver";
import XLSX from "xlsx";
/**
     * @param
     * 导出表格
     * 目前只适用于el-table
     * @arg 参数xlsxName 导出文件名 string
     * @arg 参数className 类名 string
     * @arg 参数widths array
     */
    exportExcel(xlsxName, className, widths) {
        /* generate workbook object from table */
        let fix = document.querySelector(`.${className}`).querySelector('.el-table__fixed')
        let fixRight = document.querySelector(`.${className}`).querySelector('.el-table__fixed-right')       
        
        let wb;
        if(fix||fixRight){ //判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去
            let fixedCol = fix||fixRight
            wb = XLSX.utils.table_to_book(document.querySelector("." + className).removeChild(fixedCol),{raw:true});
            document.querySelector("." + className).appendChild(fixedCol);
          }else{
            wb = XLSX.utils.table_to_book(document.querySelector("." + className),{raw:true});
          }
        /* get binary string as output */
        let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
        try {
            FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), xlsxName);
        } catch (e)
        {
            if (typeof console !== 'undefined')
                console.log(e, wbout)
        }
        return wbout
	}

使用

/**
     * @vuese
     * 导出Excel表格
     */
    exportExcel() {
      if (this.tableData.length == 0) {
        this.$showAlert.showPopMsg("当前数据为空，不可导出")
        return;
      }
      let arr = [];
      let { iyear, imonth } = this.searchForm;
      for (let i = 0; i < 7; i++) {
        arr.push({ wpx: 100 })
      }
      this.$exportExcel(`${iyear}-${imonth}按路演资料划分-${this.tableData[0].mount}.xlsx`, "roadshowDataComppp", arr);
    },

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖