在线预览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模式作为一种独特的营销策略，将白酒产品与该模式相结合，充分发挥其优势，通过独特的身份晋升和奖励机制，快速建立销售渠道，提高用户…...
轨迹在线识别导向的3D折线焊缝机器人摆动GMAW实时跟踪系统【附程序】
✨ 长期致力于3D折线焊缝、机器人、GMAW、轨迹在线识别、焊缝跟踪研究工作，擅长数据搜集与处理、建模仿真、程序编写、仿真设计。 ✅ 专业定制毕设、代码 ✅ 如需沟通交流，点击《获取方式》 （1）基于激光位移传感与密度聚类点云在线…...
5大实用功能揭秘：Sabaki围棋软件如何成为棋手必备的分析神器
5大实用功能揭秘：Sabaki围棋软件如何成为棋手必备的分析神器 【免费下载链接】Sabaki An elegant Go board and SGF editor for a more civilized age. 项目地址: https://gitcode.com/gh_mirrors/sa/Sabaki Sabaki是一款免费开源的围棋软件，以其…...
ncmdump：网易云NCM音乐解密转换终极指南
ncmdump：网易云NCM音乐解密转换终极指南 【免费下载链接】ncmdump 项目地址: https://gitcode.com/gh_mirrors/ncmd/ncmdump 在数字音乐时代，网易云音乐的NCM加密格式成为众多音乐爱好者的使用障碍。ncmdump作为一款高效的开源解密工具ÿ…...
三步搞定Windows和Office永久激活：KMS智能激活终极指南
三步搞定Windows和Office永久激活：KMS智能激活终极指南 【免费下载链接】KMS_VL_ALL_AIO Smart Activation Script 项目地址: https://gitcode.com/gh_mirrors/km/KMS_VL_ALL_AIO 还在为Windows系统频繁弹出激活提示而烦恼吗？Office文档突然变成只…...
RK3576开发板RTC硬件扩展与Linux时间管理实战指南
1. 项目概述与核心价值在嵌入式开发中，尤其是在像RK3576这类高性能AIoT开发板上，一个稳定可靠的实时时钟（RTC）往往是项目从“玩具”走向“产品”的关键一步。它不仅仅是显示个时间那么简单，更是系统日志时间戳准确、定…...
NTC与PTC热敏电阻选型实战：从原理到电路设计的深度解析
1. 项目概述：一次关于温度传感器选型的深度复盘在嵌入式系统、家电控制、电池管理乃至工业自动化领域，温度测量是基础得不能再基础，却又至关重要的一环。选对传感器，项目就成功了一半；选错，后续的校准、补偿…...
终极指南：如何在macOS上实现Windows风格的Alt-Tab窗口切换
终极指南：如何在macOS上实现Windows风格的Alt-Tab窗口切换 【免费下载链接】alt-tab-macos Windows alt-tab on macOS 项目地址: https://gitcode.com/gh_mirrors/al/alt-tab-macos 你是否曾在macOS上怀念Windows的Alt-Tab快速窗口切换体验？alt-…...
Balena Etcher：3步搞定镜像烧录，告别传统工具烦恼
Balena Etcher：3步搞定镜像烧录，告别传统工具烦恼 【免费下载链接】etcher Flash OS images to SD cards & USB drives, safely and easily. 项目地址: https://gitcode.com/GitHub_Trending/et/etcher 你是否曾为制作启动盘而烦恼࿱…...
Dism++：你的Windows系统优化瑞士军刀，16国语言支持的免费神器
Dism：你的Windows系统优化瑞士军刀，16国语言支持的免费神器 【免费下载链接】Dism-Multi-language Dism Multi-language Support & BUG Report 项目地址: https://gitcode.com/gh_mirrors/di/Dism-Multi-language 你是否曾为Windows系统越来越…...
【顶级EI复现】基于去噪概率扩散模型（DDPM）的电动汽车充电行为场景生成研究（ Python + PyTorch实现）
💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势：🌞🌞🌞博客内容尽量做到思维缜密，逻辑清晰，为了方便读者。 🎁…...