SpreadJS+vue3练手使用

在这里插入图片描述

SpreadJS的练手使用

// 首先在 package.json 这个文件里{"name": "app-admin","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite","build": "vite build","preview": "vite preview"},"dependencies": {"@element-plus/icons-vue": "^2.3.1","@vueuse/core": "^10.8.0","@vueuse/integrations": "^10.8.0","axios": "^1.6.7","element-plus": "^2.5.6","nprogress": "^0.2.0","qs": "^6.11.2","universal-cookie": "^6.1.3","vue": "^3.4.15","vue-router": "^4.2.5","vuex": "^4.0.2","@fortawesome/fontawesome-free": "^5.14.0","@grapecity/spread-excelio": "^14.0.1","@grapecity/spread-sheets": "^14.0.1","@grapecity/spread-sheets-barcode": "^14.0.1","@grapecity/spread-sheets-charts": "^14.0.1","@grapecity/spread-sheets-designer": "^14.0.1","@grapecity/spread-sheets-designer-resources-cn": "^14.0.1","@grapecity/spread-sheets-designer-vue": "^14.0.1","@grapecity/spread-sheets-languagepackages": "^14.0.1","@grapecity/spread-sheets-pdf": "^14.0.1","@grapecity/spread-sheets-pivot-addon": "^14.0.1","@grapecity/spread-sheets-print": "^14.0.1","@grapecity/spread-sheets-resources-zh": "^14.0.1","@grapecity/spread-sheets-shapes": "^14.0.1","@grapecity/spread-sheets-vue": "^14.0.1"},"devDependencies": {"@vitejs/plugin-vue": "^5.0.3","vite": "^5.1.0","vite-plugin-windicss": "^1.9.3","windicss": "^3.5.6"}
}

在这里插入图片描述


//然后在页面上使用
<template><div><!-- <div ref="ssDesigner" style="height:calc(100vh - 94px);width:100%;text-align: left;"></div> --><div ref="ssDesigner" style="height:calc(100vh - 84px);width:100%;text-align: left;"></div></div></template><script setup>import { onMounted, ref } from "vue";import "../../node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css";import "../../node_modules/@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css";import "@grapecity/spread-sheets-designer-resources-cn";import "@grapecity/spread-sheets-designer";import GC from '@grapecity/spread-sheets'import ExcelIO from '@grapecity/spread-excelio'const ssDesigner = ref(null);onMounted(() => {var designer = new GC.Spread.Sheets.Designer.Designer(ssDesigner.value);});</script>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【深度学习笔记】 3_13 丢弃法

注&#xff1a;本文为《动手学深度学习》开源内容&#xff0c;部分标注了个人理解&#xff0c;仅为个人学习记录&#xff0c;无抄袭搬运意图 3.13 丢弃法 除了前一节介绍的权重衰减以外&#xff0c;深度学习模型常常使用丢弃法&#xff08;dropout&#xff09;[1] 来应对过拟合…

阿里面试:最佳线程数,如何确定?

尼恩说在前面 在40岁老架构师 尼恩的读者交流群(50)中&#xff0c;最近有小伙伴拿到了一线互联网企业如得物、阿里、滴滴、极兔、有赞、shein 希音、百度、网易的面试资格&#xff0c;遇到很多很重要的面试题&#xff1a; 如何确定系统的最佳线程数&#xff1f; 小伙伴 没有回…

机器学习深度解析:原理、应用与前景

随着人工智能的迅速发展&#xff0c;机器学习已经成为当今时代最为引人注目的技术之一。它不仅仅是一种技术或工具&#xff0c;更是一种推动社会进步、影响人类生活的重要力量。那么&#xff0c;什么是机器学习&#xff1f;它是如何工作的&#xff1f;又在哪些领域中发挥着不可…

阿里云服务器ECS u1实例性能怎么样?

阿里云服务器ECS u1实例&#xff0c;2核4G&#xff0c;5M固定带宽&#xff0c;80G ESSD Entry盘优惠价格199元一年&#xff0c;性能很不错&#xff0c;CPU采用Intel Xeon Platinum可扩展处理器&#xff0c;购买限制条件为企业客户专享&#xff0c;实名认证信息是企业用户即可&a…

介绍一下我们:久菜盒子工作室

大数据科学团队/全网可搜索的久菜盒子工作室 我们是&#xff1a;985硕博/美国全奖doctor/计算机7年产品负责人/医学大数据公司医学研究员/SCI一区2篇/Nature子刊一篇/中文二区核心一篇/都是我们 主要领域&#xff1a;医学大数据分析/经管数据分析/金融模型/统计数理基础/统计学…

编程笔记 Golang基础 028 结构体与JSON

编程笔记 Golang基础 028 结构体与JSON 一、JSON二、结构体转JSON&#xff08;序列化&#xff09;三、JSON转结构体&#xff08;反序列化&#xff09;小结 结构体与JSON之间的相互转换是现代软件开发中数据处理的基础工具&#xff0c;极大地简化了数据在不同层次、不同组件间的…

spring boot 集成科大讯飞星火认知大模型

一、安装依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM/…

Educational Codeforces Round 160 (Rated for Div. 2) D. Array Collapse(笛卡尔树+DP)

原题链接&#xff1a;D. Array Collapse 题目大意&#xff1a; 给你一个长度为 n n n 的排列 p p p &#xff0c;排列的定义为 [ 1 , 2 , 3 , . . , n ] [1,2,3,..,n] [1,2,3,..,n] 中每个数都出现 恰好 一次。 你可以做 任意多次 这样的操作&#xff1a; 选出一个任意长度…

前端导出EXCEL

步骤解析 定义了一个名为 excelDown 的函数&#xff0c;它接受两个参数&#xff1a;res 和 type。res 是包含响应数据的对象&#xff0c;type 是要导出的文件类型。如果 type 未提供&#xff0c;则默认使用 Excel 文件的 MIME 类型。 export const excelDown (res, type) >…

unity导航网格无法烘培到台阶和斜坡

如图是我在b站学Unity导航网格时建的一个示例场景&#xff0c;本场景使用的为棱长1m的立方体&#xff0c;读者可以以此为参照度量其他物体大小。 可见导航网格根本无法烘焙到斜坡和台阶上&#xff0c;为解决问题我做了不少尝试&#xff0c;调整最大坡度和步高都没办法解决问题…

AI新纪元:可能的盈利之道

本文来源于Twitter大神宝玉&#xff08;dotey&#xff09;在聊 Sora 的时候&#xff0c;总结了 Sora 的价值和可能的盈利方向&#xff0c;我把这部分内容单独摘出来再整理一下。现在的生成式 AI 大家应该不陌生&#xff0c;用它总结文章、翻译、写作、画图&#xff0c;当然真正…

搭建私有Git服务器:GitLab部署详解

引言&#xff1a; 为了方便团队协作和代码管理&#xff0c;许多组织选择搭建自己的私有Git服务器。GitLab是一个集成了Git版本控制、项目管理、代码审查等功能的开源平台&#xff0c;是搭建私有Git服务器的理想选择。 目录 引言&#xff1a; 一、准备工作 在开始部署GitLab之…

Dockerfile和jar包不同目录处理

如果Dockerfile的全路径为/srm/myDockerfile/Dockerfile&#xff0c;而JAR文件位于/srm目录下&#xff0c;你可以在Dockerfile中使用相对路径引用JAR文件。以下是如何编写Dockerfile的示例&#xff1a; 假设你的项目结构如下&#xff1a; luaCopy code /srm |-- myDockerfile …

Map集合的遍历方式

遍历Map集合的几种方式 迭代器(Iterator)forlambdaStream 代码示例 package com.haimeng.Array;import java.security.Key; import java.util.HashMap; import java.util.Iterator; import java.util.Map;public class Lambda1 {public static void main(String[] args) {//…

MySQL数据库基础(十五):PyMySQL使用介绍

文章目录 PyMySQL使用介绍 一、为什么要学习PyMySQL 二、安装PyMySQL模块 三、PyMySQL的使用 1、导入 pymysql 包 2、创建连接对象 3、获取游标对象 4、pymysql完成数据的查询操作 5、pymysql完成对数据的增删改 PyMySQL使用介绍 提前安装MySQL数据库&#xff08;可以…

shell脚本介绍及基本功能

目录 1. 什么是shell 2. hello word 2.1 echo 2.2 第一个脚本 3. Bash的基本功能 3.1别名 3.2 常用快捷键 3.3 输入输出 3.4 输出重定向 3.5 多命令执行 3.6 管道符 3.7 通配符和特殊符号 1. 什么是shell Shell 是一个用 C 语言编写的程序&#xff0c;它是用户使用…

数据分析---常见处理逻辑

目录 数据清洗数据转换数据聚合数据筛选增删改查(以查为例)数据清洗 去除重复值:使用DISTINCT关键字去除重复行。//这将返回一个包含所有不重复城市的结果集 SELECT DISTINCT city FROM students;处理缺失值:使用IS NULL或IS NOT NULL判断是否为空值,并使用COALESCE或CASE…

STM32--低功耗模式详解

一、PWR简介 正常模式与睡眠模式耗电是mA级&#xff0c;停机模式与待机模式是uA级。 二、电源框图 供电区域有三处&#xff0c;分别是模拟部分供电&#xff08;VDDA&#xff09;&#xff0c;数字部分供电&#xff0c;包括VDD供电区域和1.8V供电区域&#xff0c;后备供电&…

mysql和redis双写一致性策略分析

mysql和redis双写一致性策略分析 一.什么是双写一致性 当我们更新了mysql中的数据后也可以同时保证redis中的数据同步更新&#xff1b; 数据读取的流程&#xff1a; 1.读取redis,如果value!null,直接返回&#xff1b; 2.如果redis中valuenull&#xff0c;读取mysql中数据对应的…

【程序员养生延寿系列-万人关注的养生指南】

一.程序员面临的健康问题 应该说不只程序员&#xff0c;大部分互联网从业者&#xff0c;都会遇到很多类似的健康问题&#xff0c;比如&#xff1a; 心理压力大&#xff0c;失眠长期加班久坐不动熬夜&#xff0c;甚至通宵作息不规律饮食不均衡 短期可能不会表现出来&#xff…