el-table实现纯前端导出（适用于el-table任意表格）

2023.9.1今天我学习了如何使用el-table实现前端的导出功能，该方法的好处有无论你的el-table长什么样子，导出之后就是什么样子。

1.安装三个插件

npm install file-save

npm install xlsx

npm install xlsx-style

2.创建Export2Excel.js

// 根据dom导出表格import { saveAs } from 'file-saver'import * as XLSX from 'xlsx'import * as XLSXStyle from "xlsx-style";function s2ab(s) {  var buf = new ArrayBuffer(s.length);  var view = new Uint8Array(buf);  for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;  return buf;}export function exportToExcel(idSelector, fileName, titleNum = 1) {  // 设置导出的内容是否只做解析，不进行格式转换     false：要解析， true:不解析  const xlsxParam = { raw: true }  let table = document.querySelector(idSelector).cloneNode(true)  // 因为element-ui的表格的fixed属性导致多出一个table，会下载重复内容，这里删除掉  if (table.querySelector('.el-table__fixed-right')) {    table.removeChild(table.querySelector('.el-table__fixed-right'))  }  if (table.querySelector('.el-table__fixed')) {    table.removeChild(table.querySelector('.el-table__fixed'))  }  const wb = XLSX.utils.table_to_book(table, xlsxParam)  let range = XLSX.utils.decode_range(wb.Sheets['Sheet1']['!ref'])  let cWidth = []  for (let C = range.s.c; C  len_max) {//最大宽度      len = len_max    }    cWidth.push({ 'wpx': len })     //列宽  }  wb.Sheets['Sheet1']['!cols'] = cWidth  const wbout = XLSXStyle.write(wb, { bookType: 'xlsx', bookSST: false, type: 'binary' })  try {    saveAs(new Blob([s2ab(wbout)], { type: '' }), `${fileName}.xlsx`)  } catch (e) {    if (typeof console !== 'undefined') {      console.log(e, wbout)    }  }  return wbout}

3.按需引入

                  //形式一                            可以用插槽形式                              //形式二