amis/docs/zh-CN/components/form/input-excel.md
吴多益 54c13b9809
feat: 解析 Excel (#2546)
* feat-input-excel

* 增加翻译
2021-09-13 10:22:50 +08:00

127 lines
2.5 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
title: InputExcel 解析 Excel
description:
type: 0
group: null
menuName: InputExcel
icon:
order: 14
---
这个组件是通过前端对 Excel 进行解析,将结果作为表单项,使用它有两个好处:
1. 节省后端开发成本,无需再次解析 Excel
2. 可以前端实时预览效果,比如配合 input-table 组件进行二次修改
## 基本使用
默认情况下只解析第一个 sheet 的内容,下面的例子中,选择上传文件后,就能知道最终会解析成什么数据
```schema: scope="body"
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"debug": true,
"body": [
{
"type": "input-excel",
"name": "excel",
"label": "上传 Excel"
}
]
}
```
默认模式是解析成对象数组,将第一行作为对象里的键,可以上传一个类似这样的 Excel 内容试试
```
|名称|网址|
|amis|https://baidu.gitee.io/amis|
|百度|https://www.baidu.com|
```
解析后的的数据格式将会是
```json
[
{
"名称": "amis",
"网址": "https://baidu.gitee.io/amis"
},
{
"名称": "百度",
"网址": "https://www.baidu.com"
}
]
```
## 二维数组模式
除了默认配置的对象数组格式,还可以使用二维数组方式,方法是设置 `"parseMode": "array"`
```schema: scope="body"
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"debug": true,
"body": [
{
"type": "input-excel",
"name": "excel",
"parseMode": "array",
"label": "上传 Excel"
}
]
}
```
如果是前面的例子,解析结果将会是
```json
[
["名称", "网址"],
["amis", "https://baidu.gitee.io/amis"],
["百度", "https://www.baidu.com"]
]
```
## 解析多个 sheet
默认配置只解析第一个 sheet如果要解析多个 sheet可以通过 `"allSheets": true` 开启多个 sheet 的读取,这时的数据会增加一个层级。
```schema: scope="body"
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"debug": true,
"body": [
{
"type": "input-excel",
"name": "excel",
"allSheets": true,
"label": "上传 Excel"
}
]
}
```
如果按之前的例子,结果将会是
```json
[
{
"sheetName": "Sheet1",
"data": [
{
"名称": "amis",
"网址": "https://baidu.gitee.io/amis"
},
{
"名称": "百度",
"网址": "https://www.baidu.com"
}
]
}
]
```