签入版本

2026-10-20 21:19:44 +08:00
commit 7e70ed6942
2943 changed files with 498573 additions and 0 deletions
@@ -0,0 +1,77 @@
+# 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)