当前位置：首页 > news >正文

ant design vue+vue3+ts+xlsx实现表格导出问excel文件（带自定义表头）~

news 2025/7/4 2:52:13

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, //计划idtype: 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 options = {skipHeader: true,};// 将表格数据转换为工作表对象const ws = XLSX.utils.json_to_sheet(dataWithHeader, options);// 创建一个新的工作簿并将工作表添加到其中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');};

效果：

优化后：

注意：

XLSX.utils.json_to_sheet() 函数用于将 JSON 数据转换为一个表格，并将其写入到一个新的或现有的工作表中。这个函数需要传入以下参数：

data（必需）：一个包含数据的 JSON 对象，通常是由 JSON.parse() 解析的 JSON 字符串。
options（可选）：一个配置对象，用于自定义转换过程。它可以包含以下属性：
- header：一个布尔值，表示是否在表格中包含表头。默认为 true。
- skipHeader：一个布尔值，表示是否跳过表头。默认为 false。
- origin：一个字符串，表示表格左上角单元格的位置。默认为 'A1'。
- schema：一个数组，表示表格的结构。每个元素是一个对象，包含 key（列名）和 width（列宽）。
- dateNF：一个字符串，表示日期格式。默认为 'yyyy-mm-dd'。
- cellStyles：一个布尔值，表示是否应用单元格样式。默认为 false。
- cellDates：一个布尔值，表示是否将数字转换为日期格式。默认为 false。
- empty：一个字符串，表示空单元格的值。默认为空字符串。
- bookType：一个字符串，表示工作簿类型。可以是 'xlsx'、'xlsm'、'xlsb' 或 'xls'。默认为 'xlsx'。
- sheet：一个字符串，表示要写入的工作表名称。如果不存在，则会创建一个新的工作表。
- write2excelOpts：一个对象，包含传递给 write2excel() 方法的其他选项。