# 导出xlsx文件组件

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

## 1.功能说明

可将{[sheetName: string]:[][]}的数据结构转化为最基本的xlsx文件

## 2.组件依赖

-- react

-- antd

-- XLSX

## 3.组件接口

```tsx
interface Iprops{
    data: {[key:string]:[][]}  //需要转化为xlsx工作簿的数据
    fileName?: string          //导出文件名
    buttonName?: string        //按钮名称
    style?: CSSProperties;     //样式
}
```

## 4.案例

通过组件导入xlsx数据，储存在变量data中，再将data数据类型做一定变换，导出成xlsx

1)导入组件

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

2)设置导入部分

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

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

3)设置数据转化部分

```tsx
const [dealData, setDealData] = useState(null);
useEffect(() => {
    let tmp = {}
    if(data){
        data.forEach(item => {
            tmp[item['name']] = item['data']
        })
        setDealData(tmp)
    }
}, [data])
```

4)组件部分

```tsx
<div className="tn-test">
    <ImportDataFromXlsx buttonName='导入数据' onComplete={onComplete} resultType={RESULT_TYPE.RAW} style={{width:"100px"}}/>
    <ExportDataToXlsx fileName='result' data={dealData}/>
</div>
```

先点击导入数据按钮导入一个xlsx文件，再点击导出xlsx数据按钮导出即可，会生成名为result.xlsx的文件