当前位置: 首页 > news >正文

基于luckysheet实现在线电子表格和Excel在线预览

概述

本文基于luckysheet实现在线的电子表格,并基于luckyexcel实现excel文件的导入和在线预览。

效果

在线编辑器

在线预览

实现

1. luckysheet介绍

Luckysheet ,一款纯前端类似excel的在线表格,功能强大、配置简单、完全开源。

  • 官方文档
  • 在线Demo

2. 实现

2.1 引入插件

本实例中直接引入编译好的js和css文件,需要引入的文件如下:

<link rel="stylesheet" type="text/css" href="/lib/luckysheet/luckysheet.css" />
<script src="/lib/luckysheet/plugin.js"></script>
<script src="/lib/luckysheet/luckysheet.umd.js"></script>
<script src="/lib/luckysheet/luckyexcel.umd.js"></script>

2.2 在线编辑器实现

<template><div class="online-table" :id="domId"></div>
</template><script>
export default {props: {tableData: {type: Object,default: () => null,},name: {type: String,default: '新建表格',}},mounted() {this.$nextTick(() => {this.init()})},watch: {tableData() {this.init()},},data() {return {domId: 'onlineTableDom',}},unmounted() {window.luckysheet.destroy()},methods: {init() {let options = {container: this.domId,title: this.name,lang: 'zh',showinfobar: false, // 右上角的用户信息展示样式plugins: [],}options.showtoolbarConfig = {undoRedo: false,currencyFormat: false, //货币格式percentageFormat: false, //百分比格式numberDecrease: false, // '减少小数位数'numberIncrease: false, // '增加小数位数textRotateMode: false, // '文本旋转方式'image: false, // '插入图片'chart: false, // '图表'(图标隐藏,但是如果配置了chart插件,右击仍然可以新建图表)postil: false, //'批注'screenshot: false, // '截图'findAndReplace: false, // '查找替换'moreFormats: false, // '更多格式'}if (this.tableData) options.data = this.tableData.datawindow.luckysheet.create(options)},getData() {return window.luckysheet.toJson()},},
}
</script><style scoped lang="scss">
.online-table {width: 100%;height: calc(100% - 4rem);
}
</style>

2.3 打开Excel文件

LuckyExcel.transformExcelToLucky(file, function(exportJson, luckysheetfile){// 获得转化后的表格数据后,使用luckysheet初始化,或者更新已有的luckysheet工作簿// 注:luckysheet需要引入依赖包和初始化表格容器才可以使用luckysheet.create({container: 'luckysheet', // luckysheet is the container iddata:exportJson.sheets,title:exportJson.info.name,userInfo:exportJson.info.name.creator});},function(err){logger.error('Import failed. Is your fail a valid xlsx?');}
);

2.4 在线预览excel

        const url = this.fileUrlwindow.LuckyExcel.transformExcelToLuckyByUrl(url, '测试文件', function (exportJson) {if (exportJson.sheets == null || exportJson.sheets.length == 0) {return}window.luckysheet.create({container: 'attachment',data: exportJson.sheets,title: exportJson.info.name,userInfo: exportJson.info.name.creator,showtoolbar: false, // 是否显示工具栏showinfobar: false, // 是否显示顶部信息栏allowEdit: false,enableAddRow: false, // 允许增加行enableAddCol: false, // 允许增加列showRowBar: false, // 是否显示行号区域showColumnBar: false, // 是否显示列号区域sheetFormulaBar: false, // 是否显示公式栏enableAddBackTop: false, //返回头部按钮rowHeaderWidth: 0, //纵坐标columnHeaderHeight: 0, //横坐标showstatisticBarConfig: {count: false,view: false,zoom: false,},hook: {cellMousedown() {return false},},showsheetbarConfig: {add: false, //新增sheetmenu: false, //sheet管理菜单sheet: true, //sheet页显示},forceCalculation: true, //强制计算公式})})

相关文章
  • Vue中使用mind-map实现在线思维导图
  • Vue中实现在线画流程图实现
  • 基于语雀编辑器的在线文档编辑与查看

相关文章:

基于luckysheet实现在线电子表格和Excel在线预览

概述 本文基于luckysheet实现在线的电子表格&#xff0c;并基于luckyexcel实现excel文件的导入和在线预览。 效果 实现 1. luckysheet介绍 Luckysheet &#xff0c;一款纯前端类似excel的在线表格&#xff0c;功能强大、配置简单、完全开源。 官方文档在线Demo 2. 实现 …...

【学习笔记】无人机系统(UAS)的连接、识别和跟踪(一)-3GPP TS 23.256 技术规范概述

3GPP TS 23.256 技术规范&#xff0c;主要定义了3GPP系统对无人机&#xff08;UAV&#xff09;的连接性、身份识别、跟踪及A2X&#xff08;Aircraft-to-Everything&#xff09;服务的支持。 3GPP TS 23.256 技术规范&#xff1a; 以下是文档的核心内容总结&#xff1a; UAV系…...

sqlalchemy_dm

1、参考文档&#xff1a; https://blog.csdn.net/njcwwddcz/article/details/126554118 https://eco.dameng.com/document/dm/zh-cn/pm/dmpython-dialect-package.html 2、生成工具 sqlalchemy2.0.0.zip 3、安装步骤 conda create --name kes --clone kes1 rz unzip sql…...

基于springboot+vue+uniapp的驾校预约平台小程序

开发语言&#xff1a;Java框架&#xff1a;springbootuniappJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#…...

echarts实现3d柱状效果

代码如下&#xff0c;单个的调第一个方法&#xff0c;多个柱状的调第二个方法&#xff0c;具体情况修改参数或者二次开发即可 //3d柱状图 export function getEcharts3DBar (xAxisData:string[][name1,name2,name3], data:number[][1,2,3], colorObj:IBaseObject{topStartColo…...

Flask校验

WTForms 是一个 Python 库&#xff0c;用于处理和验证 Web 表单。它提供了很多功能来简化表单处理&#xff0c;包括字段类型、验证器、错误消息等。在 WTForms 中&#xff0c;validate 机制是用于确保表单数据满足特定条件的关键部分。 1.验证器&#xff08;Validators&#x…...

web前端 Vue 框架面试120题(一)

面试题 1 . 简述Vue的MVVM 模式? 参考回答&#xff1a; MVVM 是 Model-View-ViewModel的缩写&#xff0c;即将数据模型与数据表现层通过数据驱动进行分离&#xff0c;从而只需要关系数据模型的开发&#xff0c;而不需要考虑页面的表现&#xff0c;具体说来如下&#xff1a;M…...

UniApp__微信小程序项目实战 实现长列表分页,通过 onReachBottom 方法上划分次加载数据

UniApp 实现长列表分页&#xff0c;通过 onReachBottom 方法上划分次加载数据 项目实战中比较常见&#xff0c;方便下次使用 文章目录 一、应用场景? 二、作用 三、使用步骤&#xff1f;          3.1 实现的整体思路&#xff1f;    …...

数据结构(功能受限的表-栈队列)

功能受限的表结构 一、栈和队列介绍 栈和队列是两种重要的线性结构&#xff0c;从数据结构角度&#xff0c;他们都是线性表&#xff0c;特殊点在于它们的操作被限制&#xff0c;也就是所谓的功能受限&#xff0c;统称功能受限的线性表 从数据类型角度&#xff0c;它们也可以是…...

高数知识补充----矩阵、行列式、数学符号

矩阵计算 参考链接&#xff1a;矩阵如何运算&#xff1f;——线性代数_矩阵计算-CSDN博客 行列式计算 参考链接&#xff1a;实用的行列式计算方法 —— 线性代数&#xff08;det&#xff09;_det线性代数-CSDN博客 参考链接&#xff1a;行列式的计算方法(含四种&#xff0c;…...

《Techporters架构搭建》-Day01 第一个RESTful API接口

微服务架构搭建 搭建微服务架构分析一下项目的build.gradle添加Demo接口 搭建微服务架构 首先搭建系统管理模块&#xff0c;模块结构如下 tps-cloud └── tps-system -- 系统管理模块└── tps-system-api -- 系统管理模块公共api模块└── tps-system-biz -- 系统管理模…...

【C++ —— AVL树】

C —— AVL树 AVL树的概念AVL树节点的定义AVL树的插入向上调整旋转左单旋右单旋左右双旋右左双旋 AVL树的高度AVL树的验证总结&#xff1a;代码 AVL树的概念 二叉搜索树虽可以缩短查找的效率&#xff0c;但如果数据有序或接近有序二叉搜索树将退化为单支树&#xff0c;查找元素…...

跨平台webSocket模块设计技术解决方案

1. 概述 目标&#xff1a;设计并实现一个能够在多种操作系统上运行的WebSocket通讯模块&#xff0c;支持与前端浏览器和HTTPS服务端进行数据交换。技术栈&#xff1a;C11 &#xff0c;使用跨平台库如 Boost处理网络IO&#xff0c;使用 JSON 库如 nlohmann/json 解析消息。 2.…...

Drools规则引擎

一、Drools规则引擎 Drools官网&#xff1a; https://www.drools.org/Drools中文网: http://www.drools.org.cn/bilibili学习视频(黑马博学谷2020年最新Java项目Drools业务规则管理系统&#xff08;BRMS&#xff09;)&#xff1a; https://www.bilibili.com/video/BV1Pa4y1a7u…...

vue学习day11-路由、路由模块的封装、声明式导航-路由的介绍、VueRouter、router-link、自定义高亮类名

32、路由 &#xff08;1&#xff09;路由的介绍 1&#xff09;生活中的路由&#xff1a;设备和ip的映射关系 2&#xff09;路由&#xff1a;一种映射关系 3&#xff09;Vue中的路由&#xff1a;路径与组件的映射关系 &#xff08;根据路由就能知道不同的路径&#xff0c;应…...

智慧校园学期基础数据管理

在智慧校园基础数据管理之一的学期管理功能管理中&#xff0c;学期的有序管理具有重要意义。它不仅是教学活动有序开展的指挥棒&#xff0c;更是连接学校管理者、教师与学生之间沟通的桥梁&#xff0c;承载着规划、跟踪与管理学期内各项事务的重要使命。 学期管理功能的首要任务…...

ISP代理和双ISP代理:区别和优势

随着互联网技术的不断发展和普及&#xff0c;网络代理服务成为众多用户保护隐私、提高网络性能、增强安全性的重要工具。其中&#xff0c;ISP代理和双ISP代理是两种常见的网络代理服务形式。本文将详细探讨ISP代理和双ISP代理的区别和优势&#xff0c;以便用户更好地了解并选择…...

【雷丰阳-谷粒商城 】【分布式高级篇-微服务架构篇】【22】【RabbitMQ】

持续学习&持续更新中… 守破离 【雷丰阳-谷粒商城 】【分布式高级篇-微服务架构篇】【22】【RabbitMQ】 Message Queue 消息队列异步处理应用解耦流量控制 消息中间件概念RabbitMQ概念MessagePublisherExchangeQueueBindingConnectionChannelConsumerVirtual HostBroker图…...

概率论原理精解【4】

文章目录 度量空间概述理论基础定义特点高级概念广泛应用 性质例子应用 柯西数列柯西数列的定义柯西数列的例子 参考文献 度量空间 概述 设 f : R n → R m , f ˙ ( x ) 在 { x : ∣ x − x 0 ∣ < r } 内连续&#xff0c;则当 ∣ t ∣ < r 时&#xff0c; f:R^n\righ…...

Linux云计算 |【第一阶段】ENGINEER-DAY3

主要内容&#xff1a; LVM逻辑卷管理、VDO、RAID磁盘阵列、进程管理 一、新建逻辑卷 1、什么是逻辑卷 逻辑卷&#xff08;Logical Volume&#xff09;是逻辑卷管理&#xff08;Logical Volume Management&#xff0c;LVM&#xff09;系统中的一个概念。LVM是一种用于磁盘管理…...

3个革命性功能:163MusicLyrics让音乐歌词管理效率提升10倍

3个革命性功能&#xff1a;163MusicLyrics让音乐歌词管理效率提升10倍 【免费下载链接】163MusicLyrics Windows 云音乐歌词获取【网易云、QQ音乐】 项目地址: https://gitcode.com/GitHub_Trending/16/163MusicLyrics 在数字音乐时代&#xff0c;歌词管理已成为音乐爱好…...

nli-distilroberta-baseAI应用:心理健康聊天机器人对话逻辑连贯性监测

NLI DistilRoBERTa Base AI应用&#xff1a;心理健康聊天机器人对话逻辑连贯性监测 1. 项目概述 心理健康聊天机器人正成为越来越多人寻求心理支持的重要工具。然而&#xff0c;这类对话系统面临一个关键挑战&#xff1a;如何确保对话内容的逻辑连贯性&#xff1f;这正是nli-…...

社交媒体机器人检测的终极对决:TwiBot-22基准测试深度解析

社交媒体机器人检测的终极对决&#xff1a;TwiBot-22基准测试深度解析 【免费下载链接】TwiBot-22 项目地址: https://gitcode.com/gh_mirrors/tw/TwiBot-22 在数字时代&#xff0c;社交媒体上的机器人账号已成为信息传播的重要参与者。它们既能推动正面信息传播&#…...

基于ChatGPT的文字冒险游戏开发实战:从对话引擎到状态管理

背景痛点&#xff1a;当传统文字游戏遇上AI叙事革命 文字冒险游戏&#xff08;Interactive Fiction, IF&#xff09;有着悠久的历史&#xff0c;从早期的《巨洞冒险》到后来的《80天》&#xff0c;其核心魅力在于通过文字构建一个充满想象力的世界&#xff0c;让玩家通过输入指…...

基于dify智能客服工作流的多智能体架构实战:高并发场景下的设计与优化

背景痛点&#xff1a;当智能客服遭遇流量洪峰 最近在负责一个电商大促期间的智能客服系统保障&#xff0c;真切体会到了传统单体智能体架构的“力不从心”。我们的客服机器人基于一个大语言模型构建&#xff0c;平时QPS在50左右时&#xff0c;响应时间&#xff08;RT&#xff0…...

合肥高中英语一对一辅导2026指南,突破听说读写全面提升路径

合肥高中英语一对一辅导2026指南&#xff0c;突破听说读写全面提升路径据《2026年中国基础教育课外辅导行业白皮书》数据显示&#xff0c;2026年高中阶段英语学科辅导需求同比增长23%&#xff0c;其中超过65%的学生家长明确表示&#xff0c;传统大班教学已无法满足孩子个性化提…...

C++ 静态成员的生命周期管理

C静态成员的生命周期管理是面向对象编程中一个既基础又关键的话题。静态成员作为类的特殊成员&#xff0c;其生命周期与普通成员变量截然不同&#xff0c;理解它们的初始化、销毁时机以及线程安全等问题&#xff0c;对于编写健壮高效的C代码至关重要。本文将深入探讨静态成员的…...

深度学习框架基于YOLOv8➕pyqt5的水稻害虫检测系统,YOLOV8模型如何训练水稻害虫检测数据集

基于YOLOv8➕pyqt5的水稻害虫检测系统&#xff0c;内含5229张水稻害虫数据集 包括[‘褐飞虱’, ‘绿叶蝉’, ‘稻纵卷叶螟’, ‘稻蝽’, ‘螟虫’, ‘稻蓟马’]&#xff0c;6类也可自行替换模型&#xff0c;使用该界面做其他检测 &#x1f33e; 基于 YOLOv8 PyQt5 的水稻害虫检…...

医学影像组学实战:Pyradiomics YAML配置文件全解析(附完整示例)

医学影像组学实战&#xff1a;Pyradiomics YAML配置文件全解析&#xff08;附完整示例&#xff09; 在医学影像分析领域&#xff0c;特征提取是构建精准诊断模型的关键步骤。Pyradiomics作为开源的医学影像组学工具包&#xff0c;通过YAML配置文件提供了高度灵活的特征提取方案…...

避坑指南:VSCode Remote-SSH离线安装时,插件版本不兼容和服务器环境配置的那些坑

深度解析VSCode Remote-SSH离线安装的五大核心难题与实战解决方案 在远程开发日益普及的今天&#xff0c;VSCode的Remote-SSH功能已经成为开发者连接Linux服务器的首选工具。然而当网络环境受限时&#xff0c;离线安装过程中的各种"暗坑"往往让开发者寸步难行。本文将…...