关于xlsx的导入和导出

常用的库是 xlsx，它提供了从 xlsx 文件读取数据的功能：
https://docs.sheetjs.com/docs/getting-started/examples/import

文件导入

要将 xlsx 文件导入为数据数组，你可以使用一些库来解析 xlsx 文件并将其转换为 JavaScript 对象或数组。一个常用的库是 xlsx，它提供了从 xlsx 文件读取数据的功能。

首先，确保你已经安装了 xlsx 库。你可以使用 npm 进行安装：

npm install xlsx

然后，你可以使用以下代码将 xlsx 文件导入为数据数组：
本实例是以一个组件的形式，使用了file的input，利用change事件来处理文件

const ExcelToJsonConverter: React.FC = () => {
    const [jsonData, setJsonData] = useState<unknown[] | null>(null);
    
    // 处理文件上传
    const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
        const file = e.target.files?.[0]; // 获取上传的文件
        if (!file) return;
        
        const reader = new FileReader(); // 创建文件读取器
        
        // 读取文件完成时的回调函数
        reader.onload = (event) => {
            const arrayBuffer = event.target?.result as ArrayBuffer; // 获取读取的文件内容（ArrayBuffer 格式）
            const binaryString = new Uint8Array(arrayBuffer).reduce((data, byte) => {
                return data + String.fromCharCode(byte);
            }, ''); // 将 ArrayBuffer 转换为二进制字符串
            
            const workbook = XLSX.read(binaryString, { type: 'binary' }); // 使用xlsx库解析文件内容
            const sheetName = workbook.SheetNames[0]; // 获取第一个工作表的名称
            const worksheet = workbook.Sheets[sheetName]; // 获取第一个工作表
            const data:[][] = XLSX.utils.sheet_to_json(worksheet, { header: 1 }); // 将工作表内容转换为JSON格式
            
            const keys = data[0];
            
            // 转换属性值数组为对象数组
            const objectArray = data.slice(1).map(values => {
                const obj = {};
                keys.forEach((key, index) => {
                    obj[key] = values[index];
                });
                return obj;
            });
            
            // 更新状态，存储转换后的JSON数据
            setJsonData(objectArray);
        };
        
        // 读取文件
        reader.readAsArrayBuffer(file);
    };
    
    return (
        <div>
            {/* 文件选择输入框 */}
            {/*<Input type="file" onChange={handleFileUpload}/>*/}
            <label className="file-input-label">
                <span>选择文件</span>
                <input onChange={handleFileUpload} type="file" style={{display:"none"}}/>
            </label>
            {/* 显示转换后的JSON数据 */}
            {jsonData && (
                <div>
                    <h2>JSON Data:</h2>
                    <pre>{JSON.stringify(jsonData)}</pre>
                </div>
            )}
        </div>
    );
};

上面的代码假设你的 xlsx 文件只有一个工作表，如果有多个工作表，你可能需要遍历 workbook.SheetNames 数组来处理每个工作表。另外，XLSX.utils.sheet_to_json 方法会将工作表转换为 JSON 对象数组，其中每个对象代表一行数据。

导出为xlsx文件

import * as XLSX from 'xlsx';

// 定义一个组件，用于导出数据到 Excel
const ExportToExcel = ({ data, fileName }) => {
  // 定义导出到 Excel 的函数
  const exportToExcel = () => {
    // 将数据转换为工作表
    const worksheet = XLSX.utils.json_to_sheet(data);
    // 创建一个新的工作簿
    const workbook = XLSX.utils.book_new();
    // 将工作表添加到工作簿中
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
    // 将工作簿写入到文件并保存
    XLSX.writeFile(workbook, `${fileName}.xlsx`);
  };

  // 返回一个按钮，点击按钮时触发导出到 Excel 的函数
  return (
    <button onClick={exportToExcel}>Export to Excel</button>
  );
};

// 导出组件，以便在其他地方使用
export default ExportToExcel;

在上面的示例中，ExportToExcel 组件接收 data 和 fileName 两个参数，分别表示要导出的 JSON 数据和生成的 XLSX 文件名。当用户点击按钮时，会调用 exportToExcel 函数来执行导出操作。该函数首先使用 XLSX.utils.json_to_sheet 方法将 JSON 数据转换为工作表，然后创建一个新的工作簿并将工作表添加到其中，最后使用 XLSX.writeFile 方法将工作簿写入到文件中。

你可以在你的项目中使用这个组件，将需要导出的 JSON 数据和文件名作为参数传递给它。