纯前端实现在线预览excel文件(插件: LuckyExcel、Luckysheet)

news2024/11/25 18:52:50

概述
在实际开发中,遇到需要在线预览各种文件的需求,最近遇到在线预览excel文件的需求,在此记录一下!本文主要功能实现,用于插件 LuckyExcel ,Luckysheet!废话不多说,上代码!

一:安装LuckyExcel、Luckysheet。

安装LuckyExcel:

npm i LuckyExcel

Luckysheet不存在npm包,需要通过script标签去通过远程url引入:

引入luckysheet 有两种方式:
第一种CDN:

注意,https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/luckysheet.umd.js这个路径意思是会拉取到最新的luckysheet代码,但是如果Luckysheet刚刚发布,jsdelivr网站可能还没来得及从npm上同步过去,故而使用这个路径还是会拉到上一个版本,我们推荐您直接指定最新版本。

想要指定Luckysheet版本,请在所有的CDN依赖文件后面加上版本号,如:https://cdn.jsdelivr.net/npm/luckysheet@2.1.12/dist/luckysheet.umd.js。

<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>

第二种本地静态文件引入,npm run build后dist文件夹下的所有文件复制到项目目录,然后通过相对路径引入:

<link rel='stylesheet' href='./plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='./plugins/plugins.css' />
<link rel='stylesheet' href='./css/luckysheet.css' />
<link rel='stylesheet' href='./assets/iconfont/iconfont.css' />
<script src="./plugins/js/plugin.js"></script>
<script src="./luckysheet.umd.js"></script>

二:在文件中引入

import LuckyExcel from 'luckyexcel';

Luckysheet库因为是script引入的,可以通过window.Luckysheet来使用,为避免ts报错,需要定义全局变量。

declare global {
    interface Window {
        luckysheet: any;
    };
};

指定一个表格容器

<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>

创建表格

<script>
//配置项
var options = {
    container: 'luckysheet' //luckysheet为容器id
}
luckysheet.create(options)
</script>

3. 在线预览excel文件

在日常的业务中,预览的excel有2种场景:

  • 在线的excel url链接
  • 通过后端流式接口请求的excel数据

所以我们通过接口将response转为buffer格式,来兼容2种形式场景:

fetch("example.xlsx").then(res => {
            return res.arrayBuffer();
        }).then(buffer => {
            // 转为blob格式,以备后面下载使用
            const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
            //可以将blob对象保存起来 需要在外层定义好`downloadFile`变量
            downloadFile = blob;
            
            LuckyExcel.transformExcelToLucky(buffer, function (exportJson, luckysheetfile) {
                exportJson.sheets[0].zoomRatio = 1;
                console.log("exportJson", exportJson);
                console.log("window.luckysheet", window.luckysheet);
                if (window.luckysheet && window.luckysheet.create) {
                    window.luckysheet?.create({
                        container: "excel", //luckysheet is the container id
                        lang: 'zh',
                        showtoolbar: false,//是否显示工具栏
                        showinfobar: false,//是否显示顶部信息栏
                        showsheetbar: false,//是否显示底部sheet页按钮
                        allowCopy: false,//是否允许拷贝
                        allowEdit: false,//是否允许编辑
                        // showstatisticBar: false,//是否显示底部计数栏
                        sheetFormulaBar: false,//是否显示公示栏
                        enableAddRow: false,//是否允许添加行
                        enableAddBackTop: false,//是否允需回到顶部
                        // devicePixelRatio: 10, //设置比例
                        data: exportJson.sheets,
                        // title: exportJson.info.name,
                        // userInfo: exportJson.info.name.creator,
                        hook: {
                            workbookCreateAfter: () => {
                                console.log("workbookCreateAfter------------");
                            }
                        }
                    });
                }

            })
        })

luckysheet中并没有excel文件加载完毕的回调,但是可以通过hook中的workbookCreateAfter来监听文件加载完成。

luckysheet的页面配置项,可以通过官网文档来进行自由配置。 luckysheet配置项

下载文件功能函数:

// 下载文件
const handleDownloadFile = () => {
    if (downloadFile) {
        const url = window.URL.createObjectURL(downloadFile);
        const a = document.createElement('a');
        a.style.display = 'none';
        a.href = url;
        a.download = '高效机房设计计算报告.xlsx';
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url);
        document.body.removeChild(a);
    }
};

最终效果如下:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2236559.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

关于我的编程语言——C/C++——第七篇(深入4)

&#xff08;叠甲&#xff1a;如有侵权请联系&#xff0c;内容都是自己学习的总结&#xff0c;一定不全面&#xff0c;仅当互相交流&#xff08;轻点骂&#xff09;我也只是站在巨人肩膀上的一个小卡拉米&#xff0c;已老实&#xff0c;求放过&#xff09; 什么是文件&#xf…

【深度学习遥感分割|论文解读7】UNetFormer:一种类UNet的Transformer,用于高效的遥感城市场景图像语义分割

【深度学习遥感分割|论文解读7】UNetFormer&#xff1a;一种类UNet的Transformer&#xff0c;用于高效的遥感城市场景图像语义分割 【深度学习遥感分割|论文解读7】UNetFormer&#xff1a;一种类UNet的Transformer&#xff0c;用于高效的遥感城市场景图像语义分割 文章目录 【…

wget命令之Tomcat(三)

引言 Tomcat是一个开源的Java Web应用服务器&#xff0c;实现了多个关键的Java EE规范&#xff0c;包括Servlet、JSP&#xff08;JavaServer Pages&#xff09;、JavaWebSocket等。由于Tomcat技术先进、性能稳定且免费&#xff0c;它成为了许多企业和开发者的首选Web应用服务器…

如何在Linux中使用Cron定时执行SQL任务

文章目录 前言一、方案分析二、使用步骤1.准备脚本2.crontab脚本执行 踩坑 前言 演示数据需要每天更新监控数据&#xff0c;不想手动执行&#xff0c;想到以下解决方案 navicat 创建定时任务java服务定时执行linux crontab 定时执行sql脚本 一、方案分析 我选择了第三个方案…

CISCO产品介绍

思科防火墙是由全球领先的网络解决方案提供商思科&#xff08;Cisco&#xff09;公司研发和生产的一系列网络安全设备。 思科的产品和服务涵盖了多个领域&#xff0c;包括但不限于&#xff1a; 网络硬件&#xff1a;思科的路由器和交换机是其核心产品&#xff0c;广泛应用于企…

机器学习(一)——基本概念、模型的评估与选择

目录 1 关于2 概念2.1 基础概念2.2 学习过程2.3 预测与评估2.4 标记与分类2.4.1 标记2.4.2 分类 2.5 回归分析2.6 聚类分析2.7 学习类型2.8 泛化能力2.9 统计学概念 3 模型评估与选择3.1 经验误差与过拟合3.2 评估方法3.2.1 留出法3.2.2 交叉验证法3.2.3 自助法3.2.4 调参与最终…

第三十五章 Vue路由进阶之声明式导航(跳转传参)

目录 一、引言 二、查询参数传参 2.1. 使用方式 2.2. 完整代码 2.2.1. main.js 2.2.2. App.vue 2.2.3. Search.vue 2.2.4. Home.vue 2.2.5. index.js 三、动态路由传参 3.1. 使用方式 3.2. 完整代码 3.2.1. main.js 3.2.2. App.vue 3.2.3. Search.vue 3.2.4. Hom…

通过pin_memory 优化 PyTorch 数据加载和传输:工作原理、使用场景与性能分析

在 PyTorch 框架中,有一个看似简单的设置可以对模型性能产生重大影响: pin_memory。这个设置具体起到了什么作用,为什么需要关注它呢?如果你正在处理大规模数据集、实时推理或复杂的多 GPU 训练任务,将 pin_memory设为 True可以提高 CPU 与 GPU 之间的数据传输速度,有可能节…

博达S3956交换机批量配置接口导致设备重启

文章目录 现象厂家查看信息如下解决方法 现象 设备信息 交换机型号&#xff1a;博达S3956版本&#xff1a;2.2.0F Build 101150ROM版本&#xff1a;0.1.8 配置命令 interface range GigaEthernet0/1-40switchport pvid 10设备重启&#xff0c;配置未生效&#xff08;批量配置…

【Linux】Ansible集中化运维工具(详解)安装、常用模块、playbook脚本

文章目录 一、Ansible安装及远程控制1、关闭防火墙和SELinux2、安装ansible3、配置SSH无密码登录1、在管理机上生成一对密钥2、将公钥下发到远程主机3、保管密钥 4、主机目录 二、常用模块1、setup模块2、copy模块3、file模块4、shell模块5、script模块6、ping模块7、group模块…

Mysql学习笔记(一):Mysql的架构

一、mysql的组成部分 下面是来自Mysql实战的图片&#xff0c;该图片很好的表示了mysql的组成 mysql架构图 我们主要是和server层打交道&#xff0c;该层由连接器&#xff0c;分析器&#xff0c;优化器执行器、&#xff08;查询缓存&#xff09;组成 二、连接器的作用 每个客户端…

题目:Wangzyy的卡牌游戏

登录 - XYOJ 思路&#xff1a; 使用动态规划&#xff0c;设dp[n]表示当前数字之和模三等于0的组合数。 状态转移方程&#xff1a;因为是模三&#xff0c;所以和的可能就只有0、1、2。等号右边的f和dp都表示当前一轮模三等于k的组合数。以第一行为例&#xff1a;等号右边表示 j转…

【实验10】卷积神经网络(1)卷积算子

目录​​​​​​​ 1 自定义二维卷积算子 2 自定义带步长和零填充的二维卷积算子 3 实现图像边缘检测 4 自定义卷积层算子和汇聚层算子 4.1卷积层&#xff1a; 4.2 汇聚层&#xff1a; 5 学习torch.nn.Conv2d()、torch.nn.MaxPool2d()&#xff1b;torch.nn.avg_pool2d()&…

基于springboot信用分析管理系统设计与实现

项目描述 临近学期结束&#xff0c;还是毕业设计&#xff0c;你还在做java程序网络编程&#xff0c;期末作业&#xff0c;老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等。这里根据疫情当下&#xff0c;你想解决的问…

用JavaScript、Nodejs写一个本地tcp服务,用于前端WebSocket调试

效果&#xff1a; 准备工作&#xff1a; 新建一个文件夹&#xff0c;在根目录安装依赖&#xff1a; npm install ws express 依赖介绍&#xff1a; WS是一个轻量级、高效的WebSocket库&#xff0c;适用于Node.js环境。 express 是一个流行的Node.js Web应用程序框架。 新…

golang分布式缓存项目 Day 1

注&#xff1a;该项目原作者&#xff1a;https://geektutu.com/post/geecache-day1.html。本文旨在记录本人做该项目时的一些疑惑解答以及部分的测试样例以便于本人复习。 LRU缓存淘汰策略 三种缓存淘汰策略 FIFO&#xff08;First In, First Out&#xff09;先进先出 原理&…

论文阅读笔记:Depth Pro: Sharp Monocular Metric Depth in Less Than a Second

论文阅读笔记&#xff1a;Depth Pro: Sharp Monocular Metric Depth in Less Than a Second 1 背景1.1 动机1.2 提出的方法 2 创新点3 方法4 模块4.1 训练目标4.2 课程训练 4.3 边缘评价指标4.4 焦距估计 5 效果5.1 和SOTA方法的对比 论文&#xff1a;https://arxiv.org/abs/24…

Python练习13

Python日常练习 题目&#xff1a; 请编写fun函数&#xff0c;其功能是打印杨辉三角形。杨辉三角行如图所示&#xff1a; 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 要求&#xff1a; 采用列表函数完成 -----------------------------------…

第18篇 :深入剖析systemverilog中 randomize 失败案例启示录(一)

经过前面章节的理论学习&#xff0c;我们对systemverilog中的随机约束&#xff0c;有一定的了解&#xff0c;那么&#xff0c;今天开始&#xff0c;着重讲述一些工作中遇到的困惑。主要通过一些例子&#xff0c;层层递进&#xff0c;举一反三&#xff0c;源于实践&#xff0c;剖…

ArcGIS软件之“计算面积几何”地图制作

一、消防站的泰森多边形 效果图&#xff1a; 二、人口调查的泰森多边形 确定后效果图&#xff1a; 三、人口调查的泰森多边形属性设置 确定后的效果图&#xff1a; 四、计算面积几何&#xff0c;用于求密度 先添加字段area_1&#xff0c;然后设置浮点型及字段属性 五…