在线预览excel，luckysheet在vue项目中的使用
一. 需求
需要在内网项目中在线预览excel文档，并可以下载
二.在项目中下载并引入luckysheet
1.打开项目根目录，npm i luckyexcel 安装
npm i luckyexcel
2.在项目的index.html文件中引入依赖
外网项目中的引入（CDN引入）：在index.html里面的引入
<!DOCTYPE html>
<html lang="zh-cmn-Hans"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>数字化企业</title><link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/css/pluginsCss.css' /><link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/plugins.css' /><link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/css/luckysheet.css' /><link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/assets/iconfont/iconfont.css' /><script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/js/plugin.js"></script><script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/luckysheet.umd.js"></script></head><body><div id="app"></div>
</html>
内网项目中的引入（本地引入）比较复杂：
1.下载luckyexcel的文件在本地：
地址：https://gitee.com/mengshukeji/Luckysheet.git
2.npm i 安装以来并 npm run build打包，打包之后生成的dist文件
npm run build
3.dist文件夹改名为luckyexcel并复制自己所用项目的public静态资源文件夹
4.在index.html文件里引入以下几个文件，
<%= BASE_URL %>表示根目录
<link rel='stylesheet' href='<%= BASE_URL %>luckyexcel/plugins/css/pluginsCss.css' /><link rel='stylesheet' href='<%= BASE_URL %>luckyexcel/plugins/plugins.css' /><link rel='stylesheet' href='<%= BASE_URL %>luckyexcel/css/luckysheet.css' /><link rel='stylesheet' href='<%= BASE_URL %>luckyexcel/assets/iconfont/iconfont.css' /><script src="<%= BASE_URL %>luckyexcel/plugins/js/plugin.js"></script><script src="<%= BASE_URL %>luckyexcel/luckysheet.umd.js"></script>
然后就可以正常的使用和引入了
在项目中的使用
1.import引入luckyexcel
import LuckyExcel from 'luckyexcel'
2.设置容器的宽高
<div id="luckysheet" ref="luckysheet" style="width:800px;height:600px;position: absolute;left: 3%;top: 8%;" ></div>
3.excel的渲染
注意：luckyexcel的数据必须是Blob格式
viewOpen(data, fileName) {//渲染方法，data表示Blob数据。fileName指的名称if (!data) {this.$message.warning('无数据')return}LuckyExcel.transformExcelToLucky(data, function(exportJson, luckysheetfile) {if (exportJson.sheets == null || exportJson.sheets.length == 0) {alert('Failed to read the content of the excel file, currently does not support xls files!')return}window.luckysheet.destroy()console.log(window.luckysheet, exportJson, fileName, '存在')window.luckysheet.create({data: exportJson.sheets,title: fileName,userInfo: exportJson.info.creator,container: 'luckysheet', // 设定DOM容器的idshowtoolbar: false, // 是否显示工具栏showinfobar: false, // 是否显示顶部信息栏showstatisticBar: true, // 是否显示底部计数栏sheetBottomConfig: false, // sheet页下方的添加行按钮和回到顶部按钮配置allowEdit: false, // 是否允许前台编辑enableAddRow: false, // 是否允许增加行enableAddCol: false, // 是否允许增加列sheetFormulaBar: false, // 是否显示公式栏enableAddBackTop: false, // 返回头部按钮showsheetbar: true, // 是否显示底部sheet页按钮// 自定义配置底部sheet页按钮showsheetbarConfig: {add: false,menu: false}})})},
这这样就可以正常显示了,如需表格编辑等操作可以参考文档
https://gitee.com/RMLY_double_wei/Luckysheet/blob/master/README-zh.md
其它问题（仅在自己项目中）
我的luckysheet是再写弹出框里面，第二次点击的时候可能会导致数据渲染不出来。所以就需要再关闭弹窗的时候把luckysheet销毁和移除。
window.luckysheet.destroy()
this.$refs.luckysheet.remove()
相关文章：
在线预览excel，luckysheet在vue项目中的使用
一. 需求 需要在内网项目中在线预览excel文档，并可以下载 二.在项目中下载并引入luckysheet 1.打开项目根目录，npm i luckyexcel 安装 npm i luckyexcel2.在项目的index.html文件中引入依赖 外网项目中的引入（CDN引入）&#…...
【python】OpenCV—Image Pyramid（8）
文章目录 1 图像金字塔2 拉普拉斯金字塔 1 图像金字塔 高斯金字塔 在 OpenCV 中使用函数 cv2.pyrDown()，实现图像高斯金字塔操作中的向下采样，使用函数 cv2.pyrUp() 实现图像金字塔操作中的向上采样 import cv2img cv2.imread(C://Users/Administrat…...
vue3父组件提交校验多个子组件
实现功能：在父组件提交事件中校验多个子组件中的form 父组件： <script setup lang"ts">import {ref, reactive} from vueimport childForm from ./childForm.vueimport childForm2 from ./childForm2.vuelet approvalRef ref()let ap…...
系统移植-uboot
uboot概述： 操作系统运行之前运行的一小段代码，用于将软硬件环境初始化到 一个合适的状态，为操作系统的加载和运行做准备（其本身不是操作系统） Bootloader基本功能 1.初始化软硬件环境 2.引导加载linux内核 3. 给lin…...
使用FFmpeg合并多个ts视频文件转为mp4格式
前言 爬取完视频发现都是ts文件，而且都是几百KB的视频片段，.ts 全名叫：MPEG Transport Stream，它是一个万能的多媒体容器，可以装下音频、视频、字幕。有时我们需要将.ts文件转换为其他更加广泛被支持的格式࿰…...
大模型之十二十-中英双语开源大语言模型选型
从ChatGPT火爆出圈到现在纷纷开源的大语言模型，众多出入门的学习者以及跃跃欲试的公司不得不面临的是开源大语言模型的选型问题。 基于开源商业许可的开源大语言模型可以极大的节省成本和加速业务迭代。 当前（2023年11月17日)开源的大语言模型如下&#…...
.Net6 部署到IIS示例
基于FastEndpoints.Net6 框架部署到IIS 环境下载与安装IIS启用与配置访问网站 环境下载与安装 首先下载环境安装程序，如下图所示,根据系统位数选择x86或者x64进行下载安装,网址：Download .NET 6.0。 IIS启用与配置 启用IIS服务 打开控制面板ÿ…...
轻松搭建短域名短链接服务系统，可选权限认证，并自动生成证书认证把nginx的http访问转换为https加密访问，完整步骤和代码
轻松搭建短域名短链接服务系统，可选权限认证，并自动生成证书认证把nginx的http访问转换为https加密访问，完整步骤和代码。 在互联网信息爆炸的时代，网址复杂而冗长，很难在口头告知他人，也难以分享到社交媒体…...
JS 日期格式化
日期格式化 parseTime： // 日期格式化 export function parseTime(time, pattern) {if (arguments.length 0 || !time) {return null}const format pattern || {y}-{m}-{d} {h}:{i}:{s}let dateif (typeof time object) {date time} else {if ((typeof time st…...
右键菜单和弹出菜单的区别
接触windows开发10年了，一直以为"右键菜单"和"弹出菜单"是不同的。 最近刚刚发现，这两种菜单在定义的时候和消息循环处理程序中并没有什么不同，区别只是在于windows底层显示方式。 如下是右键菜单的显示方式࿱…...
查询数据库DQL
DQL 查询基本语法 -- DQL :基本语法; -- 1查询指定的字段 name entrydate 并返回select name , entrydate from tb_emp;-- 2 查询 所有字段 并返回select id, username, password, name, gender, image, job, entrydate, create_time, update_time from tb_emp;-- 2 查询…...
SpringBoot中文乱码问题解决方案
在Spring Boot中，确实没有像传统Web应用程序中需要使用web.xml配置文件。对于中文乱码问题，你可以采取以下几种方式来解决： 在application.properties文件中添加以下配置： spring.http.encoding.charsetUTF-8 spring.http.encod…...
京东联盟flutter插件使用方法
目录 1.京东联盟官网注册申请步骤略~2.安卓端插件配置：3.IOS端插件配置4.其它配置5.京东OAuth授权 文档地址：https://baiyuliang.blog.csdn.net/article/details/134444104 京东联盟flutter插件地址：https://pub.dev/packages/jdkit 1.京东联…...
python电影数据可视化分析系统的设计与实现【附源码】
电影数据可视化分析系统的设计与实现 (一)开题报告，就是确定设计(论文)选题之后，学生在调查研究的基础上撰写的研究计划，主要说明设计(论文)研究目的和意义、研究的条件以及如何开展研究等问题，也可以说是对设计(论文)的论证和设…...
SQLMAP --TAMPER的编写
跟着师傅的文章进行学习 sqlmap之tamper脚本编写_sqlmap tamper编写-CSDN博客 这里学习一下tamper的编写 这里的tamper 其实就是多个绕过waf的插件 通过编写tamper 我们可以学会 在不同过滤下 执行sql注入 我们首先了解一下 tamper的结构 这里我们首先看一个最简单的例子…...
美国服务器：全面剖析其主要优点与潜在缺点
服务器是网站搭建的灵魂。信息化的今天，我们仍需要它来为网站和应用程序提供稳定的运行环境。而美国作为全球信息技术靠前的国家之一，其服务器市场备受关注。那么，美国服务器究竟有哪些主要优点和潜在缺点呢? 优点 数据中心基础设施&a…...
验证二叉搜索树
二叉搜索树 二叉查找树（Binary Search Tree），（又：二叉搜索树，二叉排序树）它或者是一棵空树，或者是具有下列性质的二叉树： 若它的左子树不空，则左子树上所有结…...
Ubuntu 18.04无网络连接的n种可能办法
文章目录 网络图标消失，Ubuntu无网络连接VMware上Ubuntu18.04，桥接了多个网卡，其中一个用来上网，均设置为静态ip网络桥接链路没有接对路由不对 树莓派同时使用无线网卡和有线网卡，且一个连接内部局域网，一个…...
MIUI查看当前手机电池容量
MIUI查看当前手机电池容量 1. 按如下步骤操作生成bug报告 2. 按如下操作解压bug报告 Last learned battery capacity...
链动2+1模式：创新营销引领白酒产业新潮流
在当今高度竞争的市场环境中，创新营销模式对于企业的发展至关重要。链动21模式作为一种独特的营销策略，将白酒产品与该模式相结合，充分发挥其优势，通过独特的身份晋升和奖励机制，快速建立销售渠道，提高用户…...
基于定制开发开源AI智能名片S2B2C商城小程序的首屏组件优化策略研究
摘要：在数字化转型背景下，用户对首屏交互效率的诉求日益提升。本文以"定制开发开源AI智能名片S2B2C商城小程序"为技术载体，结合用户行为数据与认知心理学原理，提出首屏组件动态布局模型。通过分析搜索栏、扫码入口、个人…...
计算机基础知识（第五篇）
计算机基础知识（第五篇） 架构演化与维护 软件架构的演化和定义 软件架构的演化和维护就是对架构进行修改和完善的过程，目的就是为了使软件能够适应环境的变化而进行的纠错性修改和完善性修改等，是一个不断迭代的过程࿰…...
网页端 VUE+C#/FastAPI获取客户端IP和hostname
1 IP可以获取，但是发现获取到的是服务端的IP，如何解决呢。 如果采用nginx反向代理，那么可以在conf/nginx.conf文件中配置 location /WebApi/ { proxy_pass http://localhost:5000/; #这个/会替换location种的WebApi路径 #关键，加…...
学习笔记(23): 机器学习之数据预处理Pandas和转换成张量格式[1]
学习笔记(23): 机器学习之数据预处理Pandas和转换成张量格式[1] 学习机器学习，需要学习如何预处理原始数据，这里用到pandas，将原始数据转换为张量格式的数据。 1、安装pandas pip install pandas 2、写入和读取数据 >>创建一个人工…...
单元测试与QTestLib框架使用
一.单元测试的意义 在软件开发中，单元测试是指对软件中最小可测试单元（通常是函数、类的方法）进行隔离的、可重复的验证。进行单元测试具有以下重要意义： 1.提升代码质量与可靠性： 早期错误检测： 在开发…...
Spring Boot 定时任务的使用
前言 在实际开发中，我们经常需要实现定时任务的功能，例如每天凌晨执行数据清理、定时发送邮件等。Spring Boot 提供了非常便捷的方式来实现定时任务，本文将详细介绍如何在 Spring Boot 中使用定时任务。 一、Spring Boot 定时任务简介 Spr…...
关于datetime获取时间的问题
import datetime print(datetime.now())如果用上述代码，会报错： 以下才是正确代码： from datetime import datetime print(datetime.now()) 结果： 如果想格式化时间，使用代码： from datetime import da…...
人机融合智能 | 可穿戴计算设备的多模态交互
可穿戴计算设备可以对人体以及周围环境进行连续感知和计算,为用户提供随时随地的智能交互服务。本章主要介绍人机智能交互领域中可穿戴计算设备的多模态交互,阐述以人为中心的智能穿戴交互设计目标和原则,为可穿戴技术和智能穿戴交互技术的设计提供指导,进而简述支持智能穿戴交…...
数论总结，（模版与题解）
数论 欧拉函数X质数（线性筛与二进制枚举）求解组合数欧拉降幂（乘积幂次）乘法逆元最小质因子之和模版 欧拉函数 欧拉函数的定义就是小于等于n的数里有f(n)个数与n互质，下面是求欧拉函数的模版。 package com.js.datas…...
WaytoAGI东京大会开启AI全球化新对话：技术无国界，合作促创新
全球AI专家齐聚东京，一场关于技术无国界的对话正在进行。 2025年6月7日，一场备受瞩目的AI盛会——“WaytoAGI全球AI大会东京站”在日本东京樱美林大学新宿校区正式拉开帷幕。这场为期两天的会议（6月7日至8日）由国内最大的AI开源知…...