前端导出excel

app/components/Record.tsx

@@ -2,17 +2,40 @@ import * as React from 'react';
 import { Link } from 'react-router-dom';
 import { IconButton } from './button';
 import ReturnIcon from "../icons/return.svg";
+import Excel from 'js-export-excel';
 
 const RecordApp: React.FC = () => {
     const [account, setAccount] = React.useState('');
     const [password, setPassword] = React.useState('');
 
+    // 模拟获取聊天记录数据
+    const getChatRecords = () => {
+        const records = [
+            { id: 1, timestamp: '2024-08-15 10:00:00', message: '你好，欢迎来到建科招聘！' },
+            { id: 2, timestamp: '2024-08-15 10:01:00', message: '请问有什么可以帮助您的？' },
+            { id: 3, timestamp: '2024-08-15 10:02:00', message: '我想了解关于软件工程师的职位详情。' },
+        ];
+        return records;
+    };
+
     // 点击导出
     const onClickExport = async (data: { account: string, password: string }) => {
         if (data.account && data.password) {
             if (data.account === 'root' && password === 'root@2024') {
-                const res = await fetch('/api/bigModel');
-                console.log(res);
+                // const res = await fetch('/api/bigModel');
+                // 模拟获取数据
+                const res = getChatRecords();
+                // 导出数据到Excel
+                const option = {
+                    fileName: '聊天记录',
+                    datas: [{
+                        sheetData: res,
+                        sheetName: '聊天记录',
+                    }],
+                };
+                // 使用Excel构造函数导出数据
+                const excel = new Excel(option);
+                excel.saveExcel();
             } else {
                 alert('账号密码不正确');
             }

package.json

@@ -28,6 +28,7 @@
     "fuse.js": "^7.0.0",
     "heic2any": "^0.0.4",
     "html-to-image": "^1.11.11",
+    "js-export-excel": "^1.1.4",
     "lodash-es": "^4.17.21",
     "mermaid": "^10.6.1",
     "mysql2": "^3.11.0",