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) 正确启动脚本 …...
Python:操作 Excel 折叠
💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...
Opencv中的addweighted函数
一.addweighted函数作用 addweighted()是OpenCV库中用于图像处理的函数,主要功能是将两个输入图像(尺寸和类型相同)按照指定的权重进行加权叠加(图像融合),并添加一个标量值&#x…...
django filter 统计数量 按属性去重
在Django中,如果你想要根据某个属性对查询集进行去重并统计数量,你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求: 方法1:使用annotate()和Count 假设你有一个模型Item,并且你想…...
ffmpeg(四):滤镜命令
FFmpeg 的滤镜命令是用于音视频处理中的强大工具,可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下: ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜: ffmpeg…...
Qt Http Server模块功能及架构
Qt Http Server 是 Qt 6.0 中引入的一个新模块,它提供了一个轻量级的 HTTP 服务器实现,主要用于构建基于 HTTP 的应用程序和服务。 功能介绍: 主要功能 HTTP服务器功能: 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...
unix/linux,sudo,其发展历程详细时间线、由来、历史背景
sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...
前端开发面试题总结-JavaScript篇(一)
文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包(Closure)?闭包有什么应用场景和潜在问题?2.解释 JavaScript 的作用域链(Scope Chain) 二、原型与继承3.原型链是什么?如何实现继承&a…...
多种风格导航菜单 HTML 实现(附源码)
下面我将为您展示 6 种不同风格的导航菜单实现,每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...
OpenLayers 分屏对比(地图联动)
注:当前使用的是 ol 5.3.0 版本,天地图使用的key请到天地图官网申请,并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能,和卷帘图层不一样的是,分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...
重启Eureka集群中的节点,对已经注册的服务有什么影响
先看答案,如果正确地操作,重启Eureka集群中的节点,对已经注册的服务影响非常小,甚至可以做到无感知。 但如果操作不当,可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...
