vue3+elementUiPlus表格导出功能

1.下载需要的组件包

npm install file-saver xlsx

2.页面中导入

import FileSaver from 'file-saver'
import * as XLSX from 'xlsx';

 3.页面中的表格加一个id

<el-table
        :data="tableData"
        ref="multipleTableRef"
        style="width: 100%"
id="my-table">

        为了方法连接

4. 导出按钮

<el-button type="primary" icon="download" @click="exportClick ">导出</el-button>

 5.导出方法

const exportClick = () => {var table = document.querySelector('#my-table');// 复制表格，不包括第一列和最后一列var clonedTable = table.cloneNode(true);clonedTable.querySelectorAll('tr').forEach(row => {var cells = row.cells;if (cells.length > 0) {// 删除每行的第一个单元格row.deleteCell(0);// 删除每行的最后一个单元格row.deleteCell(cells.length - 1);}});// 创建一个新的工作簿var wb = XLSX.utils.book_new();// 创建一个新的工作表var ws = XLSX.utils.table_to_sheet(clonedTable);// 调整每列的列宽以适应内容autoSizeColumns(ws);// 将工作表添加到工作簿中XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');// 导出工作簿const wbout = XLSX.write(wb, {bookType: 'xlsx',bookSST: true,type: 'binary',cellStyles: true, // 启用单元格样式});try {FileSaver.saveAs(new Blob([s2ab(wbout)], { type: 'application/octet-stream' }), '客户表.xlsx');} catch (e) {if (typeof console !== 'undefined') console.log(e, wbout);}
};

6.将字符串转为数组

// 将字符串转换为字节数组
function s2ab(s) {const buf = new ArrayBuffer(s.length);const view = new Uint8Array(buf);for (let i = 0; i < s.length; i++) {view[i] = s.charCodeAt(i) & 0xFF;}return buf;
}

7.计算最大列宽

function autoSizeColumns(ws) {const range = XLSX.utils.decode_range(ws['!ref']);for (let C = range.s.c; C <= range.e.c; ++C) {let maxColWidth = 0;for (let R = range.s.r; R <= range.e.r; ++R) {const cellAddress = { c: C, r: R };const cellRef = XLSX.utils.encode_cell(cellAddress);const cell = ws[cellRef];if (cell && cell.v) {const cellText = cell.w || cell.v.toString();const cellWidth = cellText.length + 2; // 加 2 以适应列头和数据if (cellWidth > maxColWidth) {maxColWidth = cellWidth;}}}const colWidth = maxColWidth > 20 ? maxColWidth : 20; // 设置最小列宽const col = ws['!cols'][C];if (col) {col.wch = colWidth;} else {ws['!cols'][C] = { wch: colWidth };}}
}