Excel 组件
excel 导入导出操作
项目中使用到的是 XLSX，具体文档可以参考XLSX 文档
Import
Usage
<template>
<ImpExcel @success="loadDataSuccess">
<a-button class="m-3">导入Excel</a-button>
</ImpExcel>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { ImpExcel, ExcelData } from '/@/components/Excel';
export default defineComponent({
components: { ImpExcel },
setup() {
function loadDataSuccess(excelDataList: ExcelData[]) {
tableListRef.value = [];
console.log(excelDataList);
for (const excelData of excelDataList) {
const {
header,
results,
meta: { sheetName },
} = excelData;
const columns: BasicColumn[] = [];
for (const title of header) {
columns.push({ title, dataIndex: title });
}
tableListRef.value.push({ title: sheetName, dataSource: results, columns });
}
}
return {
loadDataSuccess,
};
},
});
</script>
Events
| 事件 | 回调参数 | 说明 |
|---|
| success | (res:ExcelData)=>void | 导入成功回调 |
| error | ()=>void | 导出错误 |
ExcelData
| 属性 | 类型 | 默认值 | 说明 |
|---|
| header: | string[]; | | table 表头 |
| results: | T[]; | | table 数据 |
| meta: | { sheetName: string }; | | table title |
Export
具体详情可以参考完整版示例
import { jsonToSheetXlsx, aoaToSheetXlsx } from '/@/components/Excel';
数组格式数据导出
import { aoaToSheetXlsx } from '/@/components/Excel';
aoaToSheetXlsx({
data: [],
header: [],
filename: '二维数组方式导出excel.xlsx',
});
自定义导出格式
import { jsonToSheetXlsx } from '/@/components/Excel';
jsonToSheetXlsx({
data,
filename,
write2excelOpts: {
bookType,
},
});
json 格式导出
import { jsonToSheetXlsx } from '/@/components/Excel';
jsonToSheetXlsx({
data,
filename: '使用key作为默认头部.xlsx',
});
jsonToSheetXlsx({
data,
header: {
id: 'ID',
name: '姓名',
age: '年龄',
no: '编号',
address: '地址',
beginTime: '开始时间',
endTime: '结束时间',
},
filename: '自定义头部.xlsx',
json2sheetOpts: {
header: ['name', 'id'],
},
});
Function
| 方法 | 回调参数 | 返回值 | 说明 |
|---|
| jsonToSheetXlsx | Function(JsonToSheet) | | json 格式数据，导出到 excel |
| aoaToSheetXlsx | Function(AoAToSheet) | | 数组格式，导出到 excel |
JsonToSheet Type
| 属性 | 类型 | 默认值 | 说明 |
|---|
| data | T[] | | JSON 对象数组 |
| header?: | T; | | 表头未设置则取 JSON 对象的 key 作为 header |
| filename?: | string | excel-list.xlsx | 导出的文件名 |
| json2sheetOpts?: | JSON2SheetOpts | | 调用 XLSX.utils.json_to_sheet 的可选参数 |
| write2excelOpts?: | WritingOptions | { bookType: 'xlsx' } | 调用 XLSX.writeFile 的可选参数，具体参 XLSX 文档 |
AoAToSheet Type
| 属性 | 类型 | 默认值 | 说明 |
|---|
| data | T[][]; | | 二维数组 |
| header?: | T; | | 表头 ；未设置则没有表头 |
| filename?: | string; | excel-list.xlsx | 导出的文件名 |
| write2excelOpts?: | WritingOptions; | { bookType: 'xlsx' } | 调用 XLSX.writeFile 的可选参数 |
Vben Admin