77 lines
1.8 KiB
Markdown
77 lines
1.8 KiB
Markdown
# 9.11 Excel 导入导出组件
|
|
|
|
:::tip 概述
|
|
本节介绍前端项目中的 Excel 导入导出组件，包括导入组件（ImportExcel）和导出功能（Export2Excel）的使用方法。
|
|
:::
|
|
|
|
## 导入组件
|
|
|
|
```vue
|
|
<template>
|
|
<el-button @click="handleImport">导入</el-button>
|
|
<ImportExcel @success="onImportSuccess" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import ImportExcel from '@/components/Excel/src/ImportExcel.vue';
|
|
|
|
const onImportSuccess = (data) => {
|
|
// data 为解析后的数组，每项是对象
|
|
console.log(data);
|
|
};
|
|
</script>
|
|
```
|
|
|
|
## 导出功能
|
|
|
|
```typescript
|
|
import { jsonToSheetXlsx } from '@/components/Excel/src/Export2Excel';
|
|
|
|
const handleExport = () => {
|
|
jsonToSheetXlsx({
|
|
data: tableData.value,
|
|
header: {
|
|
name: '名称',
|
|
typeText: '类型',
|
|
statusText: '状态',
|
|
createTime: '创建时间',
|
|
},
|
|
filename: '导出数据.xlsx',
|
|
});
|
|
};
|
|
```
|
|
|
|
## 后端导出对接
|
|
|
|
```typescript
|
|
// 调用后端导出接口，返回文件 URL
|
|
const handleExport = async () => {
|
|
const url = await exampleExport(searchParams.value);
|
|
// 下载文件
|
|
window.open(url);
|
|
};
|
|
```
|
|
|
|
## 导入模板下载
|
|
|
|
```typescript
|
|
// 下载导入模板
|
|
const handleDownloadTemplate = async () => {
|
|
const url = await exampleExportTemplate();
|
|
window.open(url);
|
|
};
|
|
```
|
|
|
|
## 导入导出注意事项
|
|
|
|
| 场景 | 说明 |
|
|
|------|------|
|
|
| 大数据量导出 | 后端自动分批导出，避免内存溢出 |
|
|
| 导入模板 | 第一行为表头，第二行起为数据 |
|
|
| 字段映射 | 后端 `headerMap` 配置表头与字段的对应关系 |
|
|
| 枚举翻译 | 导入时自动将文本转为枚举值，导出时自动将枚举值转为文本 |
|
|
|
|
## 相关文档
|
|
|
|
- [数据导入导出](/zh/tools/excel.html)
|
|
- [上传配置详解](/zh/tools/upload-config.html) |