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

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

2.5 KiB
Raw Blame History

title description type group menuName icon order
InputExcel 解析 Excel 0 null InputExcel 14

这个组件是通过前端对 Excel 进行解析,将结果作为表单项,使用它有两个好处:

  1. 节省后端开发成本,无需再次解析 Excel
  2. 可以前端实时预览效果,比如配合 input-table 组件进行二次修改

基本使用

默认情况下只解析第一个 sheet 的内容,下面的例子中,选择上传文件后,就能知道最终会解析成什么数据

{
    "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|

解析后的的数据格式将会是

[
  {
    "名称": "amis",
    "网址": "https://baidu.gitee.io/amis"
  },
  {
    "名称": "百度",
    "网址": "https://www.baidu.com"
  }
]

二维数组模式

除了默认配置的对象数组格式,还可以使用二维数组方式,方法是设置 "parseMode": "array"

{
    "type": "form",
    "api": "/api/mock2/form/saveForm",
    "debug": true,
    "body": [
        {
            "type": "input-excel",
            "name": "excel",
            "parseMode": "array",
            "label": "上传 Excel"
        }
    ]
}

如果是前面的例子,解析结果将会是

[
  ["名称", "网址"],
  ["amis", "https://baidu.gitee.io/amis"],
  ["百度", "https://www.baidu.com"]
]

解析多个 sheet

默认配置只解析第一个 sheet如果要解析多个 sheet可以通过 "allSheets": true 开启多个 sheet 的读取,这时的数据会增加一个层级。

{
    "type": "form",
    "api": "/api/mock2/form/saveForm",
    "debug": true,
    "body": [
        {
            "type": "input-excel",
            "name": "excel",
            "allSheets": true,
            "label": "上传 Excel"
        }
    ]
}

如果按之前的例子,结果将会是

[
  {
    "sheetName": "Sheet1",
    "data": [
      {
        "名称": "amis",
        "网址": "https://baidu.gitee.io/amis"
      },
      {
        "名称": "百度",
        "网址": "https://www.baidu.com"
      }
    ]
  }
]