vue 前端预览 Excel 表
一、安装依赖包官网
npm i luckyexcel
template 模板
<!-- 用于渲染表格的容器 -->
<div id="luckysheet" style='width:100vw;height:100vh'></div>
二、加载
异步加载及
import LuckyExcel from 'luckyexcel';/* 下列代码加载 cdn 文件,你也可以在 public 文件夹在 html 中引入 */
// 封装加载 src 文件方法
function asynLoad(src, isCss = false) {return new Promise(res => {let el;if (isCss) {el = document.createElement('link');el.rel = 'stylesheet';el.href = src;} else {el = document.createElement('script');el.src = src;}document.documentElement.appendChild(el);el.onload = el.onreadystatechange = function() {if (!this.readyState ||this.readyState == 'loaded' ||this.readyState == 'complete') {res(true);}this.onload = this.onreadystatechange = null;};});
}/* Vue 中加载 cdn 文件 */
export default{created() {this.loadPlugins();},methods: {loadPlugins() {const baseURL = '//cdn.jsdelivr.net/npm/luckysheet@latest/dist';this.loading = true;this.tip = '正在加载依赖插件,请耐心等待...';Promise.all([asynLoad(`${baseURL}/plugins/css/pluginsCss.css`, true),asynLoad(`${baseURL}/plugins/plugins.css`, true),asynLoad(`${baseURL}/css/luckysheet.css`, true),asynLoad(`${baseURL}/assets/iconfont/iconfont.css`, true),asynLoad(`${baseURL}/plugins/js/plugin.js`),asynLoad(`${baseURL}/luckysheet.umd.js`)]).then(() => {luckysheet = (window as any).luckysheet;this.getOriginFile(); // 获取远端文件}).catch(res => {this.loading = false;this.errStatus = 1;this.errorTitle = '插件加载失败,请刷新后重试!';})}},
}
cdn 加载 index.html 文件
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/plugins.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/css/luckysheet.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/assets/iconfont/iconfont.css' />
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js"></script>
三、页面使用
/* Vue 中加载 cdn 文件 */
export default{methods: {// 获取远程文件getOriginFile() {this.tip = '正在下载文件...';this.loading = trueaxios({url: this.fileURL,responseType: 'blob'}).then(({ data }) => {const blob = new Blob([data]);const file = new File([blob], this.fileName);this.init(file); // 开始渲染}).catch(e => {this.errorTitle = '文件解析失败,请下载后使用 Excel 打开或点击重试!'this.errStatus = 2;}).finally(() => {this.loading = false;})}// 渲染方法,接受文件对象,如果是本地文件直接传入文件即可init(file: File) {luckysheet.destroy(); // 先销毁当前容器LuckyExcel.transformExcelToLucky(file, exportJson => {if (exportJson.sheets === null || !exportJson.sheets.length) {this.$message.error('无法读取excel文件的内容,当前不支持xls文件!');return;}luckysheet.create({container: 'luckysheet',showinfobar: false,lang: 'zh',data: exportJson.sheets,title: exportJson.info.name,userInfo: exportJson.info.name.creator});});}},
}
相关文章:
vue 前端预览 Excel 表
一、安装依赖包官网 npm i luckyexceltemplate 模板 <!-- 用于渲染表格的容器 --> <div id"luckysheet" stylewidth:100vw;height:100vh></div>二、加载 异步加载及 import LuckyExcel from luckyexcel;/* 下列代码加载 cdn 文件,你…...
【JS】生成N位随机数
作用 用于邮箱验证码 码 ramNum.js /*** 生成N位随机数字* param {Number} l 默认:6,默认生成6位随机数字* returns 返回N位随机数字*/ const ramNum (l 6) > {let num for (let i 0; i < l; i) {const n Math.random()const str String(n…...
2024年FPGA可以进吗
2024年,IC设计FPGA行业仍有可能是一个极具吸引力和活力的行业,主要原因包括: 1. 技术发展趋势:随着5G、人工智能、物联网、自动驾驶、云计算等高新技术的快速发展和广泛应用,对集成电路尤其是高性能、低功耗、定制化芯…...
小程序图形:echarts-weixin 入门使用
去官网下载整个项目: https://github.com/ecomfe/echarts-for-weixin 拷贝ec-canvs文件夹到小程序里面 index.js里面的写法 import * as echarts from "../../components/ec-canvas/echarts" const app getApp(); function initChart(canvas, width, h…...
百度百科人物创建要求是什么?
百度百科作为我国最大的中文百科全书,其收录的人物词条要求严谨、客观、有权威性。那么,如何撰写一篇高质量的人物词条呢?本文伯乐网络传媒将从内容要求、注意事项以及创建流程与步骤三个方面进行详细介绍。 一、内容要求 1. 基本信息&#…...
练习2-线性回归迭代(李沐函数简要解析)
环境:再练习1中 视频链接:https://www.bilibili.com/video/BV1PX4y1g7KC/?spm_id_from333.999.0.0 代码与详解 数据库 numpy 数据处理处理 torch.utils 数据加载与数据 d2l 专门的库 nn 包含各种层与激活函数 import numpy as np import torch from torch.utils import da…...
人像背景分割SDK,智能图像处理
美摄科技人像背景分割SDK解决方案:引领企业步入智能图像处理新时代 随着科技的不断进步,图像处理技术已成为许多行业不可或缺的一部分。为了满足企业对于高质量、高效率人像背景分割的需求,美摄科技推出了一款领先的人像背景分割SDK…...
100M服务器能同时容纳多少人访问
100M服务器的并发容纳人数会受到多种因素的影响,这些因素包括单个用户的平均访问流量大小、每个用户的平均访问页面数、并发用户比例、服务器和网络的流量利用率以及服务器自身的处理能力。 点击以下任一云产品链接,跳转后登录,自动享有所有…...
Mysql 的高可用详解
Mysql 高可用 复制 复制是解决系统高可用的常见手段。其思路就是:不要把鸡蛋都放在一个篮子里。 复制解决的基本问题是让一台服务器的数据与其他服务器保持同步。一台主库的数据可以同步到多台备库上,备库本身也可以被配置成另外一台服务器的主库。主…...
Acwing枚举、模拟与排序(一)
连号区间数 原题链接:https://www.acwing.com/problem/content/1212/ 初始最小值和最大值的依据是题目给出的数据范围。只要在数据范围之外就可以。 连号的时候,相邻元素元素之间,差值为1。那么区间右边界和左边界,的值的差&#…...
MySQL的主从同步原理
MySQL的主从同步(也称为复制)是一种数据同步技术,用于将一个MySQL服务器(主服务器)上的数据和变更实时复制到另一个或多个MySQL服务器(从服务器)。这项技术支持数据备份、读写分离、故障恢复等多…...
naive-ui-admin 表格去掉工具栏toolbar
使用naive-ui-admin的时候,有时候不需要显示工具栏,工具栏太占地方了。 1.在src/components/Table/src/props.ts 里面添加属性 showToolbar 默认显示,在不需要的地方传false。也可以默认不显示 ,这个根据需求来。 2.在src/compo…...
C++之结构体
结构体 //一、结构体的概念、定义和使用 // 概念:结构体属于用户自定义的数据类型,允许用户存储不同的数据类型 #include<iostream> using namespace std; #include<string> //1.创建学生数据类型:学生包括(姓名&am…...
分布式ID选型对比(1)
常见的几种ID生成方式对比: 种类 全局唯一 高性能 高可用 趋势递增 中心服务 缺点 UUID 是 高(本地生成,(无网络开销) 低(无序,不适用) 否 否 无序、字符串 数据库自增 单表唯一 中 中(宕机就会使业务服务中断) 是 否 安全性差,能猜出来规律 对于分库分表场景无法唯一 数据库自…...
T-SQL 高阶语法之存储过程
一:存储过程概念 预先存储好的sql程序,通过名称和参数进行执行,供应程序去调用,也可以有返回结果,存储过程可以包含sql语句 可以包含流程控制、逻辑语句等。 二:存储过程的优点 执行速度更快 允许模块化…...
解决鸿蒙模拟器卡顿的问题
缘起 最近在学习鸿蒙的时候,发现模拟器非常卡,不要说体验到鸿蒙的丝滑,甚至到严重影响使用的程度。 根据我开发Android的经验和在论坛翻了一圈,最终总结出了以下几个方案。 创建模拟器 1、在DevEco Virtual Device Configurat…...
【LeetCode每日一题】【BFS模版与例题】863.二叉树中所有距离为 K 的结点
BFS的基本概念 BFS 是广度优先搜索(Breadth-First Search)的缩写,是一种图遍历算法。它从给定的起始节点开始,逐层遍历图中的节点,直到遍历到目标节点或者遍历完所有可达节点。 BFS 算法的核心思想是先访问当前节点的…...
设计模式-结构模式-装饰模式
装饰模式(Decorator Pattern):动态地给一个对象增加一些额外的职责,就增加对象功能来说,装饰模式比生成子类实现更为灵活。装饰模式是一种对象结构型模式。 //首先,定义一个组件接口: public in…...
MySQL:一行记录如何
1、表空间文件结构 表空间由段「segment」、区「extent」、页「page」、行「row」组成,InnoDB存储引擎的逻辑存储结构大致如下图: 行 数据库表中的记录都是按「行」进行存放的,每行记录根据不同的行格式,有不同的存储结构。 页…...
‘grafana.ini‘ is read only ‘defaults.ini‘ is read only
docker安装grafana 关闭匿名登录情况下的免密登录遇到问题 grafana.ini is read only defaults.ini is read only 参考回答(Grafana.ini giving me the creeps - #2 by bartweemaels - Configuration - Grafana Labs Community Forums) 正确启动脚本 …...
C++初阶-list的底层
目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...
今日科技热点速览
🔥 今日科技热点速览 🎮 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售,主打更强图形性能与沉浸式体验,支持多模态交互,受到全球玩家热捧 。 🤖 人工智能持续突破 DeepSeek-R1&…...
图表类系列各种样式PPT模版分享
图标图表系列PPT模版,柱状图PPT模版,线状图PPT模版,折线图PPT模版,饼状图PPT模版,雷达图PPT模版,树状图PPT模版 图表类系列各种样式PPT模版分享:图表系列PPT模板https://pan.quark.cn/s/20d40aa…...
C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。
1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj,再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...
OPENCV形态学基础之二腐蚀
一.腐蚀的原理 (图1) 数学表达式:dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一,腐蚀跟膨胀属于反向操作,膨胀是把图像图像变大,而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...
微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据
微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列,以便知晓哪些列包含有价值的数据,…...
CRMEB 中 PHP 短信扩展开发:涵盖一号通、阿里云、腾讯云、创蓝
目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为:一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...
PostgreSQL——环境搭建
一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在࿰…...
解析奥地利 XARION激光超声检测系统:无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用
在工业制造领域,无损检测(NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统,以非接触式光学麦克风技术为核心,打破传统检测瓶颈,为半导体、航空航天、汽车制造等行业提供了高灵敏…...
ubuntu系统文件误删(/lib/x86_64-linux-gnu/libc.so.6)修复方案 [成功解决]
报错信息:libc.so.6: cannot open shared object file: No such file or directory: #ls, ln, sudo...命令都不能用 error while loading shared libraries: libc.so.6: cannot open shared object file: No such file or directory重启后报错信息&…...
