前端获取excel表格数据并在浏览器展示

🕗 发布于 2024-12-26 03:57 前端 excel

本人是在使用react时产生这个需求的所以示范代码使用react

使用其他框架的可以提取关键代码实现

1、安装插件

安装Univer

使用npm

npm install @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/engine-formula @univerjs/engine-render @univerjs/sheets @univerjs/sheets-formula @univerjs/sheets-ui @univerjs/ui

使用pnpm

pnpm add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/engine-formula @univerjs/engine-render @univerjs/sheets @univerjs/sheets-formula @univerjs/sheets-ui @univerjs/ui

安装xlsx

npm i xlsx

2、引入插件和实例化插件

你需要在项目中引入 Univer 的样式文件、语言包，以及一些必要的插件：

import "@univerjs/design/lib/index.css";
import "@univerjs/ui/lib/index.css";
import "@univerjs/docs-ui/lib/index.css";
import "@univerjs/sheets-ui/lib/index.css";
import "@univerjs/sheets-formula/lib/index.css";

import { LocaleType, Tools, Univer, UniverInstanceType } from "@univerjs/core";
import { defaultTheme } from "@univerjs/design";

import { UniverFormulaEnginePlugin } from "@univerjs/engine-formula";
import { UniverRenderEnginePlugin } from "@univerjs/engine-render";

import { UniverUIPlugin } from "@univerjs/ui";

import { UniverDocsPlugin } from "@univerjs/docs";
import { UniverDocsUIPlugin } from "@univerjs/docs-ui";

import { UniverSheetsPlugin } from "@univerjs/sheets";
import { UniverSheetsFormulaPlugin } from "@univerjs/sheets-formula";
import { UniverSheetsUIPlugin } from "@univerjs/sheets-ui";

import DesignZhCN from "@univerjs/design/locale/zh-CN";
import UIZhCN from "@univerjs/ui/locale/zh-CN";
import DocsUIZhCN from "@univerjs/docs-ui/locale/zh-CN";
import SheetsZhCN from "@univerjs/sheets/locale/zh-CN";
import SheetsUIZhCN from "@univerjs/sheets-ui/locale/zh-CN";

然后创建一个 Univer 实例，并注册这些插件：

const univer = new Univer({
  theme: defaultTheme,
  locale: LocaleType.ZH_CN,
  locales: {
    [LocaleType.ZH_CN]: Tools.deepMerge(
      SheetsZhCN,
      DocsUIZhCN,
      SheetsUIZhCN,
      UIZhCN,
      DesignZhCN,
    ),
  },
});
 
univer.registerPlugin(UniverRenderEnginePlugin);
univer.registerPlugin(UniverFormulaEnginePlugin);
 
univer.registerPlugin(UniverUIPlugin, {
  container: 'app',
});
 
univer.registerPlugin(UniverDocsPlugin, {
  hasScroll: false,
});
univer.registerPlugin(UniverDocsUIPlugin);
 
univer.registerPlugin(UniverSheetsPlugin);
univer.registerPlugin(UniverSheetsUIPlugin);
univer.registerPlugin(UniverSheetsFormulaPlugin);
 
univer.createUnit(UniverInstanceType.UNIVER_SHEET, {});

要加载数据还需这个包@univerjs/facade

npm i @univerjs/facade

import { FUniver } from "@univerjs/facade";
 
const univerAPI = FUniver.newAPI(univer);

3、获取数据源

上传本地文件

const App = () => {
    const handleFileUpload = (e) => {
        const file = e.target.files[0];
        const reader = new FileReader();

        reader.onload = (event) => {
          const data = new Uint8Array(event.target.result);
          const workbook = XLSX.read(data, { type: "array" }); // 数据源
        };
    };

    return <>
        <input type="file" onChange={handleFileUpload} />
    </>
}

根据接口获取

const App = () => {
    const fetchExcelData = async () => {
        try {
          const response = await axios("http://xxx.xxx.xxx", {
            method: "get",
            responseType: "arraybuffer",
            headers: {
              Authorization: "bearer xxx", // 添加你的认证令牌
            },
          });

          const data = new Uint8Array(response.data);
          const workbook = XLSX.read(data, { type: "array" }); // 数据源
        } catch (error) {
          console.error("Failed to fetch Excel data:", error);
        }
      };

    return <></>
}

4、处理成插件所需的数据格式

数据格式定义：Interface: IWorkbookData – Univer

workbook // 数据源 
 const convertWorkbookToJson = (workbook) => {
    const sheets = {};
    const sheetOrder = [];

    workbook.SheetNames.forEach((sheetName, sheetIndex) => {
      const worksheet = workbook.Sheets[sheetName];
      const jsonSheet = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
      console.log(jsonSheet);
      const cellData = {};
      let maxColumnCount = 0;
      jsonSheet.forEach((row, rowIndex) => {
        row.forEach((cell, colIndex) => {
          if (cell !== null && cell !== undefined && cell !== "") {
            if (!cellData[rowIndex]) {
              cellData[rowIndex] = [];
            }
            cellData[rowIndex][colIndex] = { v: cell };
            if (colIndex + 1 > maxColumnCount) {
              maxColumnCount = colIndex + 1;
            }
          }
        });
      });

      const sheetId = `sheet_${sheetIndex}`;
      sheets[sheetId] = {
        id: sheetId,
        name: sheetName,
        rowCount: jsonSheet.length,  // 多少行
        columnCount: maxColumnCount, // 多少列
        zoomRatio: 1,
        defaultColumnWidth: 73,
        defaultRowHeight: 23,
        cellData: cellData, // 每个单元格的数据
        showGridlines: 1,
        rowHeader: {
          width: 40,
          hidden: 0,
        },
        columnHeader: {
          height: 20,
          hidden: 0,
        },
      };

      sheetOrder.push(sheetId);
    });

    return {
      id: "workbook",
      sheetOrder: sheetOrder,
      locale: "zhCN",
      sheets: sheets,
    };
  };

5、在获取数据源后渲染到界面上(完整代码)

渲染效果界面

import "@univerjs/design/lib/index.css";
import "@univerjs/ui/lib/index.css";
import "@univerjs/docs-ui/lib/index.css";
import "@univerjs/sheets-ui/lib/index.css";
import "@univerjs/sheets-formula/lib/index.css";

import { LocaleType, Tools, Univer, UniverInstanceType } from "@univerjs/core";
import { defaultTheme } from "@univerjs/design";

import { UniverFormulaEnginePlugin } from "@univerjs/engine-formula";
import { UniverRenderEnginePlugin } from "@univerjs/engine-render";

import { UniverUIPlugin } from "@univerjs/ui";

import { UniverDocsPlugin } from "@univerjs/docs";
import { UniverDocsUIPlugin } from "@univerjs/docs-ui";

import { UniverSheetsPlugin } from "@univerjs/sheets";
import { UniverSheetsFormulaPlugin } from "@univerjs/sheets-formula";
import { UniverSheetsUIPlugin } from "@univerjs/sheets-ui";

import DesignZhCN from "@univerjs/design/locale/zh-CN";
import UIZhCN from "@univerjs/ui/locale/zh-CN";
import DocsUIZhCN from "@univerjs/docs-ui/locale/zh-CN";
import SheetsZhCN from "@univerjs/sheets/locale/zh-CN";
import SheetsUIZhCN from "@univerjs/sheets-ui/locale/zh-CN";

import { FUniver } from "@univerjs/facade";
import { useEffect, useRef, useState } from "react";
import * as XLSX from "xlsx";

const App = () => {
  const univerAPI = useRef();
  const univer = useRef();

  useEffect(() => {
    // fetchExcelData(); // 接口获取删除此行注释  本地上传点击上传按钮
  }, []);


  const init = () => {
    univer.current = new Univer({
      theme: defaultTheme,
      locale: LocaleType.ZH_CN,
      locales: {
        [LocaleType.ZH_CN]: Tools.deepMerge(
          SheetsZhCN,
          DocsUIZhCN,
          SheetsUIZhCN,
          UIZhCN,
          DesignZhCN
        ),
      },
    });

    univer.current.registerPlugin(UniverRenderEnginePlugin);
    univer.current.registerPlugin(UniverFormulaEnginePlugin);

    univer.current.registerPlugin(UniverUIPlugin, {
      container: "excel2",
    });

    univer.current.registerPlugin(UniverDocsPlugin, {
      hasScroll: false,
    });
    univer.current.registerPlugin(UniverDocsUIPlugin);

    univer.current.registerPlugin(UniverSheetsPlugin);
    univer.current.registerPlugin(UniverSheetsUIPlugin);
    univer.current.registerPlugin(UniverSheetsFormulaPlugin);

    univerAPI.current = FUniver.newAPI(univer.current);

    // 创建一个空白的表格可删除以下代码注释 并在useEffect中执行init();

    // univer.current.createUnit(UniverInstanceType.UNIVER_SHEET, {
    //   id: "gyI0JO",
    //   sheetOrder: ["RSfWjJFv4opmE1JaiRj80"],
    //   name: "",
    //   appVersion: "0.1.11",
    //   locale: "zhCN",
    //   styles: {},
    //   sheets: {
    //     RSfWjJFv4opmE1JaiRj80: {
    //       id: "RSfWjJFv4opmE1JaiRj80",
    //       name: "测试",
    //       tabColor: "",
    //       hidden: 0,
    //       rowCount: 20,
    //       columnCount: 10,
    //       zoomRatio: 1,
    //       freeze: {
    //         startRow: -1,
    //         startColumn: -1,
    //         ySplit: 0,
    //         xSplit: 0,
    //       },
    //       scrollTop: 0,
    //       scrollLeft: 0,
    //       defaultColumnWidth: 73,
    //       defaultRowHeight: 23,
    //       mergeData: [],
    //       cellData: {
    //         0: [
    //           {
    //             v: "123",
    //           },
    //           {
    //             v: "222",
    //           },
    //         ],
    //       },
    //       rowData: {
    //         0: {
    //           h: 105,
    //           hd: 0,
    //         },
    //       },
    //       columnData: {
    //         0: {
    //           w: 105,
    //           hd: 0,
    //         },
    //         1: {
    //           w: 100,
    //           hd: 0,
    //         },
    //         2: {
    //           w: 125,
    //           hd: 0,
    //         },
    //         3: {
    //           w: 125,
    //           hd: 0,
    //         },
    //         4: {
    //           w: 125,
    //           hd: 0,
    //         },
    //         5: {
    //           w: 125,
    //           hd: 0,
    //         },
    //         6: {
    //           w: 125,
    //           hd: 0,
    //         },
    //         7: {
    //           w: 125,
    //           hd: 0,
    //         },
    //         8: {
    //           w: 125,
    //           hd: 0,
    //         },
    //         9: {
    //           w: 125,
    //           hd: 0,
    //         },
    //       },
    //       showGridlines: 1,
    //       rowHeader: {
    //         width: 40,
    //         hidden: 0,
    //       },
    //       columnHeader: {
    //         height: 20,
    //         hidden: 0,
    //       },
    //       selections: ["B2"],
    //       rightToLeft: 0,
    //     },
    //   },
    //   resources: [
    //     {
    //       name: "SHEET_DEFINED_NAME_PLUGIN",
    //       data: "",
    //     },
    //   ],
    // });
  };

   // 点击上传按钮获取数据
  const handleFileUpload = (e) => {
    const file = e.target.files[0];
    const reader = new FileReader();

    reader.onload = (event) => {
      const data = new Uint8Array(event.target.result);
      const workbook = XLSX.read(data, { type: "array" }); // 数据源
      const jsonWorkbook = convertWorkbookToJson(workbook);

      univer.current.createUnit(UniverInstanceType.UNIVER_SHEET, jsonWorkbook) // 输入数据生成表格
    };
  };

    // 接口获取
  const fetchExcelData = async () => {
    try {
      const response = await axios("http://xxx.xxx.xxx", {
        method: "get",
        responseType: "arraybuffer", // 确保以数组缓冲区的形式获取二进制数据
        headers: {
          Authorization: "bearer xxx", // 添加你的认证令牌
        },
      });

      const data = new Uint8Array(response.data);
      const workbook = XLSX.read(data, { type: "array" }); // 数据源
      const jsonWorkbook = convertWorkbookToJson(workbook);

      univer.current.createUnit(UniverInstanceType.UNIVER_SHEET, jsonWorkbook) // 输入数据生成表格
    } catch (error) {
      console.error("Failed to fetch Excel data:", error);
    }
  };

  const convertWorkbookToJson = (workbook) => {
    const sheets = {};
    const sheetOrder = [];

    workbook.SheetNames.forEach((sheetName, sheetIndex) => {
      const worksheet = workbook.Sheets[sheetName];
      const jsonSheet = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
      console.log(jsonSheet);
      const cellData = {};
      let maxColumnCount = 0;
      jsonSheet.forEach((row, rowIndex) => {
        row.forEach((cell, colIndex) => {
          if (cell !== null && cell !== undefined && cell !== "") {
            if (!cellData[rowIndex]) {
              cellData[rowIndex] = [];
            }
            cellData[rowIndex][colIndex] = { v: cell };
            if (colIndex + 1 > maxColumnCount) {
              maxColumnCount = colIndex + 1;
            }
          }
        });
      });

      const sheetId = `sheet_${sheetIndex}`;
      sheets[sheetId] = {
        id: sheetId,
        name: sheetName,
        rowCount: jsonSheet.length,
        columnCount: maxColumnCount,
        zoomRatio: 1,
        defaultColumnWidth: 73,
        defaultRowHeight: 23,
        mergeData: mergeData,
        cellData: cellData,
        showGridlines: 1,
        rowHeader: {
          width: 40,
          hidden: 0,
        },
        columnHeader: {
          height: 20,
          hidden: 0,
        },
      };

      sheetOrder.push(sheetId);
    });

    return {
      id: "workbook",
      sheetOrder: sheetOrder,
      locale: "zhCN",
      sheets: sheets,
    };
  };
  return (
    <>
      {/* 表格容器 */}
      <div id="excel2" style={{ width: "1000px", height: "800px" }}></div>
      {/* 上传按钮 */}
      <input type="file" onChange={handleFileUpload} />
    </>
  );
};

export default App;

原文地址：https://blog.csdn.net/begei/article/details/144631537

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：关于opencv、Qt、msvc编译器之间的关系
下一篇：数据结构--堆的向上调整和向下调整

ctfshow-jwt
将信息进行安全的封装，以json的方式传递三部分分别是:Header{'typ': 'JWT' token类型'alg': 'HS256' 算法名称}将这个信息进行base64加密，构成了第一部分pa
阅读更多2024-12-26
PyCharm专项训练4 最小生成树算法
本文的实验目的是通过编程实践，掌握并应用Prime算法和Kruskal算法来求解给定图的最小生成树问题。
阅读更多2024-12-26
RabbitMQ中的Topic模式
在 RabbitMQ 中，Topic 模式是基于交换机类型为topic的一种消息传递模式。与Direct 模式（精确匹配）和Fanout 模式（广播）不同，Topic 模式允许生产者发送消息到特定的交
阅读更多2024-12-26
springboot486基于springboot的太原学院商铺管理系统(论文+源码)_kaic
结合先进的互联网技术，开发符合需求的软件，让数据内容管理不管是从录入的及时性，查看的及时性还是汇总分析的及时性，都能让正确率达到最高，管理更加的科学和便捷。目前的信息时代，对信息的管理趋于高效化，便捷
阅读更多2024-12-26
黑马程序员JavaWeb开发教程(前端部分) ---笔记分享
此篇文章记录的内容是不全的，我觉得基础的部分没有记录，我想主要学的是此课程的后端部分，前端部分学校有学习过，我就开倍速一带而过啦，还有就是学校学的是Vue3和此视频讲的Vue2还是有一定区别的。目录总
阅读更多2024-12-26
齐次矩阵包含平移和旋转
我们可以看到，对于齐次矩阵中包含了旋转操作。取前三行和前三列就是旋转矩阵。
阅读更多2024-12-26
在Nginx部署Web应用，如何保障后端API的安全
对于JWT认证，后端服务负责生成和验证令牌，Nginx仅需检查令牌的存在性。为了实现这一点，可以在Nginx中添加一个自定义的Lua脚本（需要安装。保持系统和软件包的更新是至关重要的。使用自动化的包管
阅读更多2024-12-26
【文档搜索引擎】使用多线程优化流程
通过测试，我们可以发现程序执行过程中主要耗时的就是“索引的制作”，因为索引是一个一个，单线程制作的，就很耗时。- 我们可以尝试使用多线程，将这个步骤优化一下，提高一下性能
阅读更多2024-12-26
每天40分玩转Django：Django管理界面
name = models.CharField('分类名称', max_length=100)description = models.TextField('描述', blank=True)creat
阅读更多2024-12-26
翻转（蓝桥杯2023大学C组试题E）
如果能翻成一样，就继续翻，如果不能翻成一样，就无解。后面2D行，每行包含一个01串，每两行为一组数据，第2i-1行为第i组数据的Ti(i)为下标，第2i行为第i组数据的Si(i为下标)，Si(i为下标
阅读更多2024-12-26