前端univer创建、编辑excel

前端univer创建、编辑excel

源码在线demo：https://codesandbox.io/p/sandbox/univer-q87kqg?file=/src/Demo.jsx

univer官网地址：https://univer.ai/zh-CN/guides/sheet/introduction

安装univer

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 @univerjs/facade

安装xlsx处理数据

npm install xlsx

创建实例

  1. 引入 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 } 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 { UniverInstanceType } from "@univerjs/core";
import { FUniver } from "@univerjs/facade";
  1. 创建sheet实例，挂载到dom元素上
  const workbookConfig = {id: 'workbook',locale: "zhCN",}const univerAPI = useRef();const univer = useRef();useEffect(() => {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: "univer-sheet-container-id",});univer.current.registerPlugin(UniverDocsPlugin);univer.current.registerPlugin(UniverDocsUIPlugin);univer.current.registerPlugin(UniverSheetsPlugin);univer.current.registerPlugin(UniverSheetsUIPlugin);univer.current.registerPlugin(UniverSheetsFormulaPlugin);univer.current.createUnit(UniverInstanceType.UNIVER_SHEET, {});univerAPI.current = FUniver.newAPI(univer.current);return () => {univerAPI.current.disposeUnit(workbookConfig.id);};}, []);// 挂在实例<div id="univer-sheet-container-id" className="univer-sheet-container" style={{height: "500px" }} />

导入excel文件、通过xlsx对文件进行处理，通过@univerjs/facade导入数据

  /** 上传文件 */const handleChangeUploadExcel = async (fileData) => {const reader = new FileReader();reader.onload = (e) => {const data = e.target.result;const workbook = XLSX.read(data, { type: "binary" });const excelData = convertWorkbookToJson(workbook);console.log("%c [ excelData ]-87","font-size:13px; background:pink; color:#bf2c9f;",excelData);univerAPI.current.disposeUnit(workbookConfig.id);univer.current.createUnit(UniverInstanceType.UNIVER_SHEET, excelData);};reader.readAsBinaryString(fileData.file);};/** 将sheet数据转换为json */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 });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 + 50,columnCount: maxColumnCount + 50,zoomRatio: 1,cellData: cellData,showGridlines: 1,};sheetOrder.push(sheetId);});return {...workbookConfig,sheetOrder: sheetOrder,sheets: sheets,};};<Uploadaccept=".xls,.xlsx"onChange={handleChangeUploadExcel}beforeUpload={() => false}showUploadList={false}multiple={false}><Button type="primary" className="upload-btn">选择excel文件</Button></Upload>

获取表格数据

univerAPI.current.getActiveWorkbook().save()

效果：

初始化：
在这里插入图片描述
导入数据

在这里插入图片描述
获取表格数据
在这里插入图片描述

完整代码：

import React, { useEffect, useRef, useState } from "react";
import "antd/dist/antd.css";
import "./index.css";
import { Button, Upload } from "antd";
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 } 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 { UniverInstanceType } from "@univerjs/core";
import { FUniver } from "@univerjs/facade";
import * as XLSX from "xlsx";const workbookConfig = {id: "workbook",locale: "zhCN",
};const App = () => {const univerAPI = useRef();const univer = useRef();const [excelData, setExcelData] = useState("");useEffect(() => {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: "univer-sheet-container-id",});univer.current.registerPlugin(UniverDocsPlugin);univer.current.registerPlugin(UniverDocsUIPlugin);univer.current.registerPlugin(UniverSheetsPlugin);univer.current.registerPlugin(UniverSheetsUIPlugin);univer.current.registerPlugin(UniverSheetsFormulaPlugin);univer.current.createUnit(UniverInstanceType.UNIVER_SHEET, {});univerAPI.current = FUniver.newAPI(univer.current);return () => {univerAPI.current.disposeUnit(workbookConfig.id);};}, []);/** 获取表格数据 */const handleGetSheetData = () => {const data = univerAPI.current.getActiveWorkbook().save();console.log("%c [ data ]-68","font-size:13px; background:pink; color:#bf2c9f;",data);setExcelData(JSON.stringify(data));};/** 上传文件 */const handleChangeUploadExcel = async (fileData) => {const reader = new FileReader();reader.onload = (e) => {const data = e.target.result;const workbook = XLSX.read(data, { type: "binary" });const excelData = convertWorkbookToJson(workbook);console.log("%c [ excelData ]-87","font-size:13px; background:pink; color:#bf2c9f;",excelData);univerAPI.current.disposeUnit(workbookConfig.id);univer.current.createUnit(UniverInstanceType.UNIVER_SHEET, excelData);};reader.readAsBinaryString(fileData.file);};/** 将sheet数据转换为json */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 });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 + 50,columnCount: maxColumnCount + 50,zoomRatio: 1,cellData: cellData,showGridlines: 1,};sheetOrder.push(sheetId);});return {...workbookConfig,sheetOrder: sheetOrder,sheets: sheets,};};return (<div className="main-container"><div><Uploadaccept=".xls,.xlsx"onChange={handleChangeUploadExcel}beforeUpload={() => false}showUploadList={false}multiple={false}><Button type="primary" className="upload-btn">选择excel文件</Button></Upload></div><divid="univer-sheet-container-id"className="univer-sheet-container"style={{ height: "500px" }}/><div><Button type="primary" onClick={handleGetSheetData}>获取表格数据</Button></div>表格数据：<div>{excelData}</div></div>);
};
export default App;

源码在线demo：https://codesandbox.io/p/sandbox/univer-q87kqg?file=/src/Demo.jsx

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.xdnf.cn/news/145441.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

音频北斗定位系统有什么用?

音频北斗定位系统有什么用?

在当今科技飞速发展的时代&#xff0c;定位技术已经成为我们日常生活和各行各业不可或缺的一部分。其中&#xff0c;音频北斗定位系统作为一种新兴的定位技术&#xff0c;正逐渐展现出其独特的优势和应用价值。那么&#xff0c;到底音频北斗定位系统有什么用呢?我们一起来了解…
阅读更多...
计算机网络nat 映射案列

计算机网络nat 映射案列

1 拓扑案列 2 配置 pc 访问外网 # interface LoopBack192 ip address 192.168.1.1 255.255.255.0 # interface Vlan-interface1 ip address 10.1.1.1 255.255.255.0 # # ip route-static 0.0.0.0 0 10.1.1.2 # local-user admin class manage password hash $h$6$0XD4lC…
阅读更多...
微信小程序. tarojs webView的 onload 事件不触发

微信小程序. tarojs webView的 onload 事件不触发

功能需求&#xff1a;想再webView加载成功后做一些逻辑操作。使用onLoad事件 现象&#xff1a;在taro里面webView的onload。onError 事件不触发了 版本&#xff1a;taro 3.6版本 分析&#xff1a;刚开始想着可能是版本&#xff0c;然后用另外一个项目&#xff08;taro 3.4版…
阅读更多...
Docker笔记-Docker Dockerfile

Docker笔记-Docker Dockerfile

Docker笔记-Docker Dockerfile Dockerfile 是一个用来构建镜像的文本文件&#xff0c;文本内容包含了一条条构建镜像所需的指令和说明。 这里讲解如何运行 Dockerfile 文件来定制一个镜像。 DockerFile构建过程解析&#xff1a; 1、每条保留字指令都必须为大写字母且后面要…
阅读更多...
元学习的简单示例

元学习的简单示例

代码功能 模型结构&#xff1a;SimpleModel是一个简单的两层全连接神经网络。 元学习过程&#xff1a;在maml_train函数中&#xff0c;每个任务由支持集和查询集组成。模型先在支持集上进行训练&#xff0c;然后在查询集上进行评估&#xff0c;更新元模型参数。 任务生成&…
阅读更多...
C#自定义曲线绘图面板

C#自定义曲线绘图面板

一、实现功能 1、显示面板绘制。 2、拖动面板&#xff0c;X轴、Y轴都可以拖动。 3、显示面板缩放&#xff0c;放大或者缩小。 4、鼠标在面板中对应的XY轴数值。 5、自动生成的数据数组&#xff0c;曲线显示。 6、鼠标是否在曲线上检测。 二、界面 拖动面板 鼠标在曲线上…
阅读更多...
Linux —— 多线程

Linux —— 多线程

一、本篇重点 1.了解线程概念&#xff0c;理解线程与进程区别与联系 2.理解和学会线程控制相关的接口和操作 3.了解线程分离与线程安全的概念 4.学会线程同步。 5.学会互斥量&#xff0c;条件变量&#xff0c;posix信号量&#xff0c;以及读写锁 6.理解基于读写锁的读者写…
阅读更多...
《JKTECH柔性振动盘：原理与多行业应用》东莞市江坤自动化科技有限公司

《JKTECH柔性振动盘：原理与多行业应用》东莞市江坤自动化科技有限公司

一、柔性振动盘的原理 柔性振动盘是一种新型的自动化上料设备&#xff0c;它采用先进的音圈电机技术和柔性振动技术&#xff0c;实现了对各种不规则形状、微小尺寸、易损伤零部件的高效上料和分拣。 其工作原理主要包括以下几个方面&#xff1a; 1. 音圈电机驱动 柔性振动盘内部…
阅读更多...
分布式系统的概念与设计模式

分布式系统的概念与设计模式

概念 定义&#xff1a;分布式系统是指将数据和计算任务分散到多个独立的计算机上&#xff0c;这些计算机通过网络进行通信和协作&#xff0c;共同对外提供服务。分布式系统不仅提高了系统的可靠性和可扩展性&#xff0c;还增强了系统的并发处理能力和数据管理能力。 特点&…
阅读更多...
运维开发之堡垒机（Fortress Machine for Operation and Development）

运维开发之堡垒机（Fortress Machine for Operation and Development）

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:Linux运维老纪的首页…
阅读更多...
mysql通过binlog做数据恢复

mysql通过binlog做数据恢复

1 介绍 binlog&#xff08;二进制日志&#xff09;在 MySQL 中具有非常重要的作用。它记录了数据库的所有更改操作&#xff0c;主要用于数据恢复、复制和审计等方面。以下是 binlog 的主要作用&#xff1a; 1.数据恢复 binlog 可以用于恢复数据库中的数据。当数据库发生故障时…
阅读更多...
分布式框架 - ZooKeeper

分布式框架 - ZooKeeper

一、什么是微服务架构 1、单体架构 顾名思义一个软件系统只部署在一台服务器上。 ​ 在高并发场景中&#xff0c;比如电商项目&#xff0c;单台服务器往往难以支撑短时间内的大量请求&#xff0c;聪明的架构师想出了一个办法提高并发量&#xff1a;一台服务器不够就加一台&am…
阅读更多...
微信小程序拨打电话点取消报错“errMsg“:“makePhoneCall:fail cancel“

微信小程序拨打电话点取消报错“errMsg“:“makePhoneCall:fail cancel“

问题&#xff1a;微信小程序中拨打电话点取消&#xff0c;控制台报错"errMsg":"makePhoneCall:fail cancel" 解决方法&#xff1a;在后面加上catch就可以解决这个报错 wx.makePhoneCall({phoneNumber: 181********}).catch((e) > {console.log(e) //用…
阅读更多...
数据安全治理

数据安全治理

数据安全治理 1.数据安全治理2.终端数据安全加密类权限控制类终端DLP类桌面虚拟化安全桌面 3.网络数据安全4.存储数据安全5.应用数据安全6.其他话题数据脱敏水印与溯源 7.UEBA8.CASB 1.数据安全治理 数据安全治理最为重要的是进行数据安全策略和流程制订。在企业或行业内经常发…
阅读更多...
前端实用工具（二）：编程规范化解决方案

前端实用工具（二）：编程规范化解决方案

目录 本地代码规范化工具 代码检测工具ESLint 代码格式化工具Prettier 远程代码规范化工具 远程提交规范化工具commitizen 提交规范检验工具commitlint husky 什么是git hooks commitlint安装 husky安装 检测代码提交规范 ESLint husky 自动修复格式错误lint-staged…
阅读更多...
使用 Puppeteer-Cluster 和代理进行高效网络抓取： 完全指南

使用 Puppeteer-Cluster 和代理进行高效网络抓取： 完全指南

文章目录 一、介绍&#xff1f;二、什么是 Puppeteer-Cluster&#xff1f;三、为什么代理在网络抓取中很重要&#xff1f;四、 为什么使用带代理的 Puppeteer-Cluster&#xff1f;五、分步指南&#xff1a; 带代理的 Puppeteer 群集5.1. 步骤 1&#xff1a;安装所需程序库5.2. …
阅读更多...
基于 ROS 的Terraform托管服务轻松部署ChatGLM2-6B

基于 ROS 的Terraform托管服务轻松部署ChatGLM2-6B

介绍 ChatGLM2-6B是开源中英双语对话模型ChatGLM-6B的第二代版本&#xff0c;在保留了初代模型对话流畅、部署门槛较低等众多优秀特性的基础上&#xff0c;ChatGLM2-6B具有更强大的性能、更长的上下文、更高效的推理等特性。 资源编排服务&#xff08;Resource Orchestration…
阅读更多...
C++入门 之 类和对象（下）

C++入门 之 类和对象（下）

目录 一、初始化列表 二、隐式类型转换与explict 三、静态成员——static 四、友元 五、内部类 六、匿名对象 七.对象拷贝时的编译器优化 一、初始化列表 之前我们实现构造函数时&#xff0c;初始化成员变量主要使用函数体内赋值&#xff0c;构造函数初始化还有一种方式&…
阅读更多...
闯关leetcode——66. Plus One

闯关leetcode——66. Plus One

大纲 题目地址内容 解题代码地址 题目 地址 https://leetcode.com/problems/plus-one/description/ 内容 You are given a large integer represented as an integer array digits, where each digits[i] is the ith digit of the integer. The digits are ordered from mo…
阅读更多...
pdf文件怎么直接翻译？使用这些工具让翻译变得简单

pdf文件怎么直接翻译？使用这些工具让翻译变得简单

在全球化日益加深的职场环境中&#xff0c;处理外语PDF文件成为了许多职场人士面临的共同挑战。 面对这些“加密”的信息宝库&#xff0c;如何高效、准确地将英文pdf翻译成对应语言&#xff0c;成为了提升工作效率的关键。 以下是几款在PDF翻译领域表现出色的软件&#xff0c…
阅读更多...
最新文章

Copyright @ 2022~2023