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>文章来源:https://www.uudwc.com/A/9djzm/
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 };
}
}
}
文章来源地址https://www.uudwc.com/A/9djzm/