1、首先默认你已安装ant design vue、xlsx 库、及file-saver。
2、导入:
import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';
注:这里的xlsx导入不能这么写,否则会报错,原因是版本不一致,语法向上兼容。
import XLSX from 'xlsx';
3、完整代码。
<a-button class="btn" type="primary" @click="exportData">导出</a-button>
<a-table :dataSource="dataList" :columns="columns" :scroll="{ x: '100%' }">
<template #bodyCell="{ column }">
<template v-if="column.key === 'canStop'">
<a style="color: blue">停用</a>
</template>
</template>
</a-table>
import XLSX from 'xlsx';
import { saveAs } from 'file-saver';
const dataList = ref([
{
id: 1, //计划id
type: 1, //分配类型(1:指定人指定车; 2:指定人平均分车)
status: 1, //状态
staffCount: 1, //导入员工人数合计
carCount: 1, //导入车量数合计
countPerStaff: 1, //预计每位员工可分配
firstAllocateTime: '2024-08-29 16:16:11', //首次分配时间
modifiedPerson: '张三', //操作人
modifiedTime: '2024-08-29 16:16:11', //操作时间
canStop: true, //是否允许停止(true:允许; false: 不允许)
},
]);
// 导出
const exportData = () => {
// 定义表头
const header = [
'序号',
'分配形式',
'状态',
'导入员工人数合计',
'导入车辆数合计',
'预计每位员工可分配',
'首次分配时间',
'操作人',
'操作时间',
'操作',
];
// 将表头和表格数据合并为一个二维数组
const dataWithHeader = [header, ...dataList.value.map((row) => Object.values(row))];
// 将表格数据转换为工作表对象
const ws = XLSX.utils.json_to_sheet(dataWithHeader);
// 创建一个新的工作簿并将工作表添加到其中
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
// 将工作簿转换为二进制数据并保存为文件
const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'table-data.xlsx');
};
效果: