# 导入xlsx文件组件

组件来源: 检测系统v1 - 提取

## 1.功能说明

可上传一个xlsx文件，将文件的数据结构转化为json或者array

## 2.组件依赖

-- react

-- antd

-- 工具类xlsx-to-json（该工具类依赖组件XLSX）

## 3.组件接口

```tsx
interface Iprops{
    onComplete?: (value) => void;  //完成后的回调，一般为给父组件赋予处理后的xlsx数据
    buttonName?: string;           //按钮名称
    resultType?: number;           //结果类型，raw则为表格原始数据；json则为处理后的json数据
    style?: CSSProperties;         //样式
}

export const RESULT_TYPE = {
    JSON: 1,
    RAW: 2
}
```

## 4.案例

通过组件导入数据，储存在变量data中

1)导入组件

```tsx
import ImportDataFromXlsx from './common/import-data-from-xlsx';
import { RESULT_TYPE } from './common/import-data-from-xlsx';
```

2)在外部设置导入数据存储位置与用来存储的方法

```tsx
const [data, setData] = useState(null);

useEffect(() => {
}, [data])

const onComplete = (value) => {
    setData(value);
}
```

3)插入组件

```tsx
<div className="tn-test">
    <ImportDataFromXlsx buttonName='导入数据' onComplete={onComplete} resultType={RESULT_TYPE.RAW} style={{width:"100px"}/>  {/* 选择导入原始数据 */}
</div>
```

## 5.备注

在选择JSON模式下，对xlsx的输入格式有一定的要求，详情可参考doc/json格式输入范例.xlsx