XLSX插件使用 — 导入导出(含中文表头)（React+Antd 对上传表格做数据格式验证）

需求说明

1.需要前端做数据导出（非调用接口）
2.需要对上传的表格数据做验证，不通过验证需要提示格式不正确，阻拦上传

技术栈介绍

React+Antdesign+XLSX

js-xlsx 介绍

由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库，功能强大，支持格式众多，支持xls、xlsx、ods(一种OpenOffice专有表格文件格式)等十几种格式。

GitHub地址：https://github.com/SheetJS/sheetjs

官网地址：https://sheetjs.com/

React使用文档：https://docs.sheetjs.com/docs/demos/frontend/react

导出的简单使用

首先插件的几个重要的名词对应如下图

根据数据类型，写法可分为

1. 纯数组

   /**
    * 导出 excel 文件
    * @param array JSON 数组
    * @param sheetName 第一张表名
    * @param fileName 文件名
    */
   export function exportExcelFile(array: any[], sheetName = '表1', fileName = 'example.xlsx') {
        
     const jsonWorkSheet = xlsx.utils.json_to_sheet(array);
     const workBook: WorkBook = {
        
       SheetNames: [sheetName],
       Sheets: {
        
         [sheetName]: jsonWorkSheet,
       }
     };
     return xlsx.writeFile(workBook, fileName);
   }
   

2. 对象数组（后端返回的数组是一堆对象）（第一行为中文表头）

     export function exportExcelFile(array: any[], sheetName = '表1', fileName = 'example.xlsx') {
        
       // 属性名数组
       const header = ['name', 'age', 'addr'];
       <