|
| 1 | +# Excel 多 Sheet 导入 - 快速上手 |
| 2 | + |
| 3 | +## 🚀 最简单的方式 |
| 4 | + |
| 5 | +只需 **3 步** 即可实现 Excel 多 sheet 导入: |
| 6 | + |
| 7 | +```typescript |
| 8 | +// 1. 引入插件 |
| 9 | +import { VTableSheet } from '@visactor/vtable-sheet'; |
| 10 | +import * as VTablePlugins from '@visactor/vtable-plugins'; |
| 11 | + |
| 12 | +// 2. 注册插件 |
| 13 | +const sheetInstance = new VTableSheet(container, { |
| 14 | + VTablePluginModules: [ |
| 15 | + { module: VTablePlugins.ExcelImportPlugin } |
| 16 | + ] |
| 17 | +}); |
| 18 | + |
| 19 | +// 3. 一行代码导入 |
| 20 | +const plugin = sheetInstance.getPlugin('excel-import-plugin'); |
| 21 | +await plugin.importFile(); // ✨ 自动导入所有 sheets! |
| 22 | +``` |
| 23 | + |
| 24 | +## 💡 核心特性 |
| 25 | + |
| 26 | +### 自动智能识别 |
| 27 | +- ✅ 插件会自动检测你使用的是 VTable-sheet 还是 ListTable |
| 28 | +- ✅ VTable-sheet: 自动导入所有 sheets |
| 29 | +- ✅ ListTable: 保持原有单 sheet 导入 |
| 30 | + |
| 31 | +### 零配置使用 |
| 32 | +- ✅ 无需手动转换数据格式 |
| 33 | +- ✅ 无需手动调用 `updateOption` |
| 34 | +- ✅ 无需编写数据处理逻辑 |
| 35 | + |
| 36 | +### 完全向后兼容 |
| 37 | +- ✅ 原有代码无需修改 |
| 38 | +- ✅ 所有旧功能正常工作 |
| 39 | +- ✅ 可选使用新功能 |
| 40 | + |
| 41 | +## 📖 使用示例 |
| 42 | + |
| 43 | +### 示例 1: 基础用法(推荐) |
| 44 | + |
| 45 | +```typescript |
| 46 | +// 创建按钮 |
| 47 | +const importBtn = document.createElement('button'); |
| 48 | +importBtn.textContent = '导入 Excel'; |
| 49 | +importBtn.onclick = async () => { |
| 50 | + const plugin = sheetInstance.getPlugin('excel-import-plugin'); |
| 51 | + |
| 52 | + // 一行代码,自动处理一切! |
| 53 | + await plugin.importFile(); |
| 54 | + |
| 55 | + alert('导入成功!'); |
| 56 | +}; |
| 57 | +``` |
| 58 | + |
| 59 | +### 示例 2: 高级用法(自定义控制) |
| 60 | + |
| 61 | +```typescript |
| 62 | +// 只导入前 3 个 sheet |
| 63 | +const result = await plugin.importMultipleSheets({ |
| 64 | + sheetIndices: [0, 1, 2] |
| 65 | +}); |
| 66 | + |
| 67 | +// 自定义处理 |
| 68 | +const sheetsConfig = result.sheets.map((sheet, index) => ({ |
| 69 | + ...sheet, |
| 70 | + filter: true, // 添加筛选功能 |
| 71 | + active: index === 0 |
| 72 | +})); |
| 73 | + |
| 74 | +sheetInstance.updateOption({ sheets: sheetsConfig }); |
| 75 | +``` |
| 76 | + |
| 77 | +## 🎯 对比说明 |
| 78 | + |
| 79 | +### 之前(复杂) |
| 80 | +```typescript |
| 81 | +// 1. 导入数据 |
| 82 | +const result = await plugin.importMultipleSheets(); |
| 83 | + |
| 84 | +// 2. 手动转换格式(15+ 行代码) |
| 85 | +const sheetsConfig = result.sheets.map((sheetData, index) => ({ |
| 86 | + sheetKey: sheetData.sheetKey, |
| 87 | + sheetTitle: sheetData.sheetTitle, |
| 88 | + rowCount: Math.max(sheetData.rowCount, 100), |
| 89 | + columnCount: Math.max(sheetData.columnCount, 26), |
| 90 | + data: sheetData.data, |
| 91 | + active: index === 0, |
| 92 | + filter: true |
| 93 | +})); |
| 94 | + |
| 95 | +// 3. 手动更新 |
| 96 | +sheetInstance.updateOption({ sheets: sheetsConfig }); |
| 97 | +``` |
| 98 | + |
| 99 | +### 现在(简单) |
| 100 | +```typescript |
| 101 | +// 一行代码搞定! |
| 102 | +await plugin.importFile(); |
| 103 | +``` |
| 104 | + |
| 105 | +**代码量减少 95%!** 🎉 |
| 106 | + |
| 107 | +## 📋 配置选项 |
| 108 | + |
| 109 | +| 选项 | 类型 | 默认值 | 说明 | |
| 110 | +|------|------|--------|------| |
| 111 | +| `autoTable` | `boolean` | `true` | 是否自动更新表格 | |
| 112 | +| `importAllSheets` | `boolean` | `false` | 是否导入所有 sheets | |
| 113 | +| `sheetIndices` | `number[]` | - | 指定导入的 sheet 索引 | |
| 114 | +| `batchSize` | `number` | `1000` | 批处理大小 | |
| 115 | + |
| 116 | +## 🔍 API 参考 |
| 117 | + |
| 118 | +### `importFile()` |
| 119 | +智能导入方法,自动识别表格类型: |
| 120 | +- **VTable-sheet**: 导入所有 sheets 并自动更新 |
| 121 | +- **ListTable**: 导入单个 sheet |
| 122 | + |
| 123 | +**返回**: `Promise<ImportResult | MultiSheetImportResult>` |
| 124 | + |
| 125 | +### `importMultipleSheets(options?)` |
| 126 | +手动导入多个 sheets(高级用法) |
| 127 | + |
| 128 | +**参数**: |
| 129 | +- `options.sheetIndices?: number[]` - 指定要导入的 sheet 索引 |
| 130 | + |
| 131 | +**返回**: `Promise<MultiSheetImportResult>` |
| 132 | + |
| 133 | +## ❓ 常见问题 |
| 134 | + |
| 135 | +### Q1: 如何只导入特定的 sheets? |
| 136 | +```typescript |
| 137 | +await plugin.importMultipleSheets({ |
| 138 | + sheetIndices: [0, 2, 4] // 只导入第 0, 2, 4 个 sheet |
| 139 | +}); |
| 140 | +``` |
| 141 | + |
| 142 | +### Q2: 如何禁用自动更新? |
| 143 | +```typescript |
| 144 | +const sheetInstance = new VTableSheet(container, { |
| 145 | + VTablePluginModules: [ |
| 146 | + { |
| 147 | + module: VTablePlugins.ExcelImportPlugin, |
| 148 | + moduleOptions: { |
| 149 | + autoTable: false // 禁用自动更新 |
| 150 | + } |
| 151 | + } |
| 152 | + ] |
| 153 | +}); |
| 154 | +``` |
| 155 | + |
| 156 | +### Q3: 导入的数据格式是什么? |
| 157 | +```typescript |
| 158 | +{ |
| 159 | + sheets: [ |
| 160 | + { |
| 161 | + sheetTitle: "Sheet1", // Sheet 名称 |
| 162 | + sheetKey: "sheet_123456789_0", // 唯一标识 |
| 163 | + data: [ // 二维数组 |
| 164 | + ["A1", "B1", "C1"], |
| 165 | + ["A2", "B2", "C2"] |
| 166 | + ], |
| 167 | + rowCount: 100, // 行数 |
| 168 | + columnCount: 10 // 列数 |
| 169 | + } |
| 170 | + ] |
| 171 | +} |
| 172 | +``` |
| 173 | + |
| 174 | +### Q4: 支持哪些文件格式? |
| 175 | +- ✅ `.xlsx` (Excel 2007+) |
| 176 | +- ✅ `.xls` (Excel 97-2003) |
| 177 | + |
| 178 | +## 📚 相关文档 |
| 179 | + |
| 180 | +- [完整使用指南](./docs/excel-multi-sheet-import-guide.md) |
| 181 | +- [功能更新说明](./docs/excel-multi-sheet-import-changelog.md) |
| 182 | +- [完整示例代码](../vtable-sheet/examples/excel-multi-sheet-import/) |
| 183 | + |
| 184 | +## 💬 技术支持 |
| 185 | + |
| 186 | +如有问题或建议: |
| 187 | +- GitHub Issues: https://github.com/VisActor/VTable/issues |
| 188 | +- 官方文档: https://visactor.io/vtable |
| 189 | + |
| 190 | +--- |
| 191 | + |
| 192 | +**享受简化的开发体验!** ✨ |
| 193 | + |
0 commit comments