一、安装
npm install xlsx
二、核心代码
javascript
<template>
<div class="statistics-container">
<el-button type="primary" @click="handleExportSelected">导出选中</el-button>
<el-table
:data="tableData"
border
style="width: 100%"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" />
<el-table-column prop="index" label="序号" width="90" />
<el-table-column prop="nickName" label="昵称" width="170" />
<el-table-column prop="username" label="账号名" width="150" />
</el-table>
</div>
</template>
<script lang="ts" setup>
import * as XLSX from "xlsx";
// 表格数据
const tableData = ref([]);
// 选中项
const selectedRows = ref<any[]>([]);
const handleSelectionChange = (val: any[]) => {
selectedRows.value = val;
};
// 导出选中
const handleExportSelected = () => {
if (selectedRows.value.length === 0) {
ElMessage.warning("请先选择要导出的数据");
return;
}
// 准备导出数据
const exportData = selectedRows.value.map((item) => {
return {
用户ID: item.userId,
客户昵称: item.nickName,
账号名: item.username,
};
});
// 创建工作簿
const ws = XLSX.utils.json_to_sheet(exportData);
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "列表数据");
// 导出文件
const fileName = `列表数据_选中_${new Date().getTime()}.xlsx`;
XLSX.writeFile(wb, fileName);
ElMessage.success(`成功导出${selectedRows.value.length}条数据`);
};
</script>
三、设置表头样式、实现列宽自适应
安装xlsx-js-style,设置单元格样式
npm install xlsx-js-style
javascript
import XLSX from "xlsx-js-style";
// 导出选中
const handleExportSelected = () => {
if (selectedRows.value.length === 0) {
ElMessage.warning("请先选择要导出的数据");
return;
}
// 准备导出数据
const exportData = selectedRows.value.map((item) => {
return {
用户ID: item.userId,
客户昵称: item.nickName,
账号名: item.username,
};
});
// 创建工作簿
const ws = XLSX.utils.json_to_sheet(exportData);
// 设置表头样式
const headerStyle = {
font: {
name: "Arial",
sz: 12,
bold: true,
color: { rgb: "000000" },
},
fill: {
fgColor: { rgb: "f3fff1" },
},
alignment: {
horizontal: "center",
vertical: "center",
},
border: {
top: { style: "thin", color: { rgb: "000000" } },
bottom: { style: "thin", color: { rgb: "000000" } },
left: { style: "thin", color: { rgb: "000000" } },
right: { style: "thin", color: { rgb: "000000" } },
},
};
// 应用表头样式
const range = XLSX.utils.decode_range(ws["!ref"]);
for (let col = range.s.c; col <= range.e.c; col++) {
const cell = ws[XLSX.utils.encode_cell({ r: 0, c: col })];
if (cell) {
cell.s = headerStyle;
}
}
// 设置列宽自适应
const colWidths = [];
for (let col = range.s.c; col <= range.e.c; col++) {
let maxWidth = 10;
for (let row = range.s.r; row <= range.e.r; row++) {
const cell = ws[XLSX.utils.encode_cell({ r: row, c: col })];
if (cell && cell.v) {
const cellLength = cell.v.toString().length;
if (cellLength > maxWidth) {
maxWidth = cellLength;
}
}
}
// 限制最大宽度为50,最小宽度为20
colWidths.push({ wch: Math.min(Math.max(maxWidth + 2, 20), 50) });
}
ws["!cols"] = colWidths;
const wb = XLSX.utils.book_new();
console.log(ws);
XLSX.utils.book_append_sheet(wb, ws, "列表数据");
// 导出文件
const fileName = `列表数据_选中_${new Date().getTime()}.xlsx`;
XLSX.writeFile(wb, fileName);
ElMessage.success(`成功导出${selectedRows.value.length}条数据`);
};
四、效果展示
