XLSX + LuckySheet + LuckyExcel实现前端的excel预览

文章目录

    • 功能简介
    • 简单代码实现
    • 效果
    • 参考

功能简介

  1. 通过LuckyExcel的transformExcelToLucky方法， 我们可以把一个文件直接转成LuckySheet需要的json字符串， 之后我们就可以用LuckySheet预览excel
  2. LuckyExcel只能解析xlsx格式的excel文件，因此对于xls和csv的格式，我们需要通过XLSX来转化成xlsx格式，但在转化过程中会丢失样式
  3. 对于excel中存在很多的空白行，在显示的时候可能会出现卡顿，所以我们需要将过多的空白行移除

简单代码实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Excel File Upload and Preview with Luckysheet</title>
</head>
<body><!-- 文件上传控件 -->
<input type="file" id="fileUpload"/><!-- Luckysheet 的容器 -->
<div id="luckysheet" style="position: relative; width: 100%; height: 500px;"></div>
<script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script><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><script src="https://cdn.jsdelivr.net/npm/luckyexcel/dist/luckyexcel.umd.js"></script><script>const _xlsxType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';const  _xlsType = 'application/vnd.ms-excel';const  _csvType = 'text/csv';//如果后端是以流的方式返回，可以调用这个方法const handleExcel = (res, fileName) => {const file = getExcelFile(res, fileName);handleExcelFile(file);}// 获取Excel文件const getExcelFile = (res, fileName) => {// 根据文件后缀名判断文件类型if (fileName.endsWith('.xlsx')) {return new File([res], fileName, {type: _xlsxType});} else if (fileName.endsWith('.xls')) {return new File([res], fileName, {type: _xlsType});} else if (fileName.endsWith('.csv')) {return new File([res], fileName, {type: _csvType});} else {throw new Error("Unsupported file type");}}// 处理Excel文件const handleExcelFile = (file) => {const fileName = file.name;// 根据文件后缀名判断文件类型并进行处理if (fileName.endsWith('.xlsx')) {console.log("handle excel for xlsx type..", fileName);handleExcelForXlsxType(file, fileName);} else if (fileName.endsWith('.xls') || fileName.endsWith('.csv')) {console.log("handle excel for xls or csv type..", fileName);handleExcelForXlsAndCsvType(file, fileName);} else {throw new Error("Unsupported file type");}}// 处理xlsx类型的Excel文件const handleExcelForXlsxType = (file, fileName) => {const reader = new FileReader();reader.onload = function (event) {const data = new Uint8Array(event.target.result);const workbook = XLSX.read(data, {type: 'array'});// 获取Excel文件中的最大行数let maxRowCountFromExcel = getMaxRowCountFromExcel(workbook);// 如果行数大于100000，则处理Excel文件中的空行if (maxRowCountFromExcel > 1000000) {console.log("excel file has too many blank row..", maxRowCountFromExcel);handleBlankRowForExcelWithTooManyBlankRow(workbook);const xlsxFile = toXlsxExcelFile(workbook, fileName);createLuckySheet(xlsxFile);} else {createLuckySheet(file);}};reader.readAsArrayBuffer(file);}// 处理xls和csv类型的Excel文件const handleExcelForXlsAndCsvType = (file, fileName) => {const reader = new FileReader();// 读取文件完成后的回调函数reader.onload = function (event) {const data = new Uint8Array(event.target.result);// 读取Excel文件内容const workbook = XLSX.read(data, {type: 'array'});// 将Excel文件转换为xlsx类型const xlsxFile = toXlsxExcelFile(workbook, fileName);// 处理xlsx类型的Excel文件handleExcelForXlsxType(xlsxFile, fileName);};// 以ArrayBuffer的形式读取文件reader.readAsArrayBuffer(file);}/ 创建Luckysheetconst createLuckySheet = (file) => {// 销毁已存在的Luckysheetwindow.luckysheet.destroy();// 将Excel文件转换为Luckysheet的jsonLuckyExcel.transformExcelToLucky(file, function (exportJson, luckysheetfile) {if (exportJson.sheets == null || exportJson.sheets.length === 0) {throw new Error("Failed to load excel file");}// 创建Luckysheet的配置项const options = {container: 'luckysheet',data: exportJson.sheets, // title: exportJson.info.name,// userInfo: exportJson.info.name.creator,column: 10,row: 10,showinfobar: false,sheetFormulaBar: true,showConfigWindowResize: false};// 创建Luckysheetwindow.luckysheet.create(options);});}// 获取Excel文件中的最大行数const getMaxRowCountFromExcel = (workbook) => {let maxRowCount = 0;if (workbook.SheetNames == null || workbook.SheetNames.length === 0) {return maxRowCount;}// 遍历每个sheet，获取最大行数workbook.SheetNames.forEach(sheetName => {const worksheet = workbook.Sheets[sheetName];if (worksheet['!ref'] === undefined) {return;}const range = XLSX.utils.decode_range(worksheet['!ref']);maxRowCount = maxRowCount + range.e.r;});console.log("max:", maxRowCount)return maxRowCount;}const reduceBlankRow = (row, range, worksheet) => {// 从给定的行开始，向上遍历到工作表的起始行while (row > range.s.r) {// 假设当前行是空的let allEmpty = true;// 遍历当前行的所有列for (let col = range.s.c; col <= range.e.c; col++) {// 获取当前单元格的引用const cell_ref = XLSX.utils.encode_cell({c: col, r: row});// 如果当前单元格不为空，则将allEmpty设置为false并跳出循环if (worksheet[cell_ref]) {allEmpty = false;break;}}// 如果当前行是空的，则将行数减一，否则跳出循环if (allEmpty) {row--;} else {break;}}// 更新工作表范围的结束行range.e.r = row;// 更新工作表的范围引用worksheet['!ref'] = XLSX.utils.encode_range(range.s, range.e);}// 处理Excel文件中的空行const handleBlankRowForExcelWithTooManyBlankRow = (workbook) => {if (workbook.SheetNames == null || workbook.SheetNames.length === 0) {return;}// 遍历每个sheet，处理空行workbook.SheetNames.forEach(sheetName => {const worksheet = workbook.Sheets[sheetName];if (worksheet['!ref'] === undefined) {return;}const range = XLSX.utils.decode_range(worksheet['!ref']);let row = range.e.r;reduceBlankRow(row, range, worksheet);});}// 将Excel文件转换为xlsx类型const toXlsxExcelFile = (workbook, fileName) => {const newWorkbook = XLSX.write(workbook, {bookType: 'xlsx', type: 'binary'});const data = new Uint8Array(newWorkbook.length);for (let i = 0; i < newWorkbook.length; i++) {data[i] = newWorkbook.charCodeAt(i);}return new File([data], fileName, {type: _xlsxType});}// 文件上传控件的change事件处理函数document.getElementById('fileUpload').addEventListener('change', function (e) {// 获取上传的文件const file = e.target.files[0];// 处理Excel文件handleExcelFile(file);});</script></body>
</html>

效果

在这里插入图片描述

参考

https://juejin.cn/post/7211805251216031801
https://segmentfault.com/a/1190000043720845
https://juejin.cn/post/7232524757525659708
https://blog.csdn.net/q2qwert/article/details/130908294
https://www.cnblogs.com/ajaemp/p/12880847.html
https://blog.csdn.net/weixin_40775791/article/details/135409716
https://blog.csdn.net/u013113491/article/details/129106671

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

.NET 漏洞分析 | 某ERP系统存在SQL注入

.NET 漏洞分析 | 某ERP系统存在SQL注入

01阅读须知 此文所提供的信息只为网络安全人员对自己所负责的网站、服务器等&#xff08;包括但不限于&#xff09;进行检测或维护参考&#xff0c;未经授权请勿利用文章中的技术资料对任何计算机系统进行入侵操作。利用此文所提供的信息而造成的直接或间接后果和损失&#xf…
阅读更多...
Java中s-EJB 与 e-EJB的区别

Java中s-EJB 与 e-EJB的区别

在Java中&#xff0c;关于“s-EJB”与“e-EJB”的区分&#xff0c;实际上可能存在一定的误解或混淆&#xff0c;因为在标准的EJB&#xff08;Enterprise JavaBeans&#xff09;术语中&#xff0c;并没有直接称为“s-EJB”和“e-EJB”的明确分类。然而&#xff0c;为了尝试解答这…
阅读更多...
【Postman gRPC测试全攻略】探索微服务通信的新纪元

【Postman gRPC测试全攻略】探索微服务通信的新纪元

标题&#xff1a;【Postman gRPC测试全攻略】探索微服务通信的新纪元 gRPC是一种高性能、开源和通用的RPC框架&#xff0c;由Google主导开发&#xff0c;它使用Protocol Buffers作为接口描述语言和消息交换格式。Postman作为API开发的利器&#xff0c;也提供了对gRPC服务的测试…
阅读更多...
封装2个函数

封装2个函数

1 #include "key1.h"2 //封装EXTI章节函数3 void hal_exti_init(int exti,unsigned int i)4 {5 switch(exti)6 {7 case 9:8 //使能GPIOF外设时钟9 RCC->MP_AHB4ENSETR | (0x1<<5);10 //将PF9设置为输出模式11 …
阅读更多...
MyBatis（22）如何在 MyBatis 中使用注解而不是 XML 映射文件

MyBatis（22）如何在 MyBatis 中使用注解而不是 XML 映射文件

在 MyBatis 中&#xff0c;使用注解而不是 XML 映射文件来进行 SQL 映射是一种更为简洁直观的方式&#xff0c;尤其适用于 SQL 语句较少的场景。通过注解&#xff0c;开发者可以直接在接口方法上声明 SQL 语句&#xff0c;这样可以减少项目中的配置文件数量&#xff0c;使得项目…
阅读更多...
学习笔记——动态路由——OSPF（认证）

学习笔记——动态路由——OSPF（认证）

十二、OSPF邻居认证 1、OSPF邻居认证概述 链路是路由器接口的另一种说法&#xff0c;因此OSPF也称为接口状态路由协议。OSPF通过路由器之间通告网络接口的状态来建立链路状态数据库&#xff0c;生成最短路径树&#xff0c;每个OSPF路由器使用这些最短路径构造路由表。 OSPF认…
阅读更多...
基于Vue框架实现的记事本

基于Vue框架实现的记事本

<!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>懒人记事本</title><style>body {fo…
阅读更多...
深度网络现代实践 - 深度前馈网络之反向传播和其他的微分算法篇

深度网络现代实践 - 深度前馈网络之反向传播和其他的微分算法篇

序言 反向传播&#xff08;Backpropagation&#xff0c;简称backprop&#xff09;是神经网络训练过程中最关键的技术之一&#xff0c;尤其在多层神经网络中广泛应用。它是一种与优化方法&#xff08;如梯度下降法&#xff09;结合使用的算法&#xff0c;用于计算网络中各参数的…
阅读更多...
大数据面试题之数仓(1)

大数据面试题之数仓(1)

目录 介绍下数据仓库 数仓的基本原理 数仓架构 数据仓库分层(层级划分)&#xff0c;每层做什么?分层的好处? 数据分层是根据什么? 数仓分层的原则与思路 知道数仓建模常用模型吗?区别、优缺点? 星型模型和雪花模型的区别?应用场景?优劣对比 数仓建模有哪些方式…
阅读更多...
【Symfony社区全接触】深入探索文档与支持资源

【Symfony社区全接触】深入探索文档与支持资源

标题&#xff1a;【Symfony社区全接触】深入探索文档与支持资源 Symfony是一个强大的PHP框架&#xff0c;拥有一个活跃的开发者社区和丰富的文档资源。这些资源对于学习和使用Symfony至关重要。本文将详细介绍Symfony的文档和社区支持&#xff0c;包括官方文档、社区论坛、邮件…
阅读更多...
如何计算弧线弹道的落地位置

如何计算弧线弹道的落地位置

1&#xff09;如何计算弧线弹道的落地位置 2&#xff09;Unity 2021 IL2CPP下使用Protobuf-net序列化报异常 3&#xff09;编译问题&#xff0c;用Mono可以&#xff0c;但用IL2CPP就报错 4&#xff09;Wwise的Bank在安卓上LoadBank之后&#xff0c;播放没有声音 这是第393篇UWA…
阅读更多...
02 数据加工层 如何搭建用户与内容的标准规范体系

02 数据加工层 如何搭建用户与内容的标准规范体系

你好&#xff0c;我是周大壮。 01 讲我们提到了个性化流量分发体系的四个阶段&#xff0c;并着重讲解了数据采集阶段的内容。那么&#xff0c;这一讲我们主要围绕数据加工阶段的内容进行详细讲解。 在课程开始之前&#xff0c;我们先举一个场景进行说明。 近年来&#xff0c…
阅读更多...
静态方法与实例方法的区别

静态方法与实例方法的区别

静态方法与实例方法的区别 1、静态方法&#xff08;Static Methods&#xff09;1.1 调用方式1.2 访问权限 2、实例方法&#xff08;Instance Methods&#xff09;2.1 调用方式2.2 访问权限 3、总结 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1…
阅读更多...
大数据面试题之数仓(2)

大数据面试题之数仓(2)

目录 维度表和事实表的区别? 什么是ER模型? OLAP、OLTP解释(区别)三范式是什么&#xff0c;举些例子 维度设计过程&#xff0c;事实设计过程 维度设计中有整合和拆分&#xff0c;有哪些方法&#xff0c;并详细说明 事实表设计分几种&#xff0c;每一种都是如何在业…
阅读更多...
【C++】解决 C++ 语言报错：Invalid Array Index

【C++】解决 C++ 语言报错：Invalid Array Index

文章目录 引言 无效数组索引&#xff08;Invalid Array Index&#xff09;是 C 编程中常见且危险的错误之一。当程序试图使用不合法的索引访问数组时&#xff0c;就会发生无效数组索引错误。这种错误不仅会导致程序崩溃&#xff0c;还可能引发不可预测的行为和安全漏洞。本文将…
阅读更多...
【PB案例学习笔记】-28制作一个右键菜单

【PB案例学习笔记】-28制作一个右键菜单

写在前面 这是PB案例学习笔记系列文章的第28篇&#xff0c;该系列文章适合具有一定PB基础的读者。 通过一个个由浅入深的编程实战案例学习&#xff0c;提高编程技巧&#xff0c;以保证小伙伴们能应付公司的各种开发需求。 文章中设计到的源码&#xff0c;小凡都上传到了gite…
阅读更多...
任天堂称未来第一方游戏不会使用生成式AI

任天堂称未来第一方游戏不会使用生成式AI

虽然EA、育碧、暴雪、Embracer等西方游戏厂商都大力支持生成式AI技术&#xff0c;但日本老牌游戏公司任天堂并不会追随这一步伐。任天堂已经确认该公司未来的第一方游戏不会使用生成式AI技术。 在公司最近的投资人问答会上&#xff0c;任天堂描绘了公司未来游戏愿景。在谈到AI技…
阅读更多...
安徽农业大学学报

安徽农业大学学报

《安徽农业大学学报》是安徽农业大学主办&#xff0c;国内外公开发行的综合性农业科学类学术期刊&#xff0c;主要刊登茶叶科学、动植物遗传育种、作物栽培、植物保护、林学、动物科学与动物医学、水产科学、生物学、土壤学、农业生态与环境科学、园艺学、食品科学、农业机械工…
阅读更多...
Oracle PL / SQL变量值

Oracle PL / SQL变量值

常量 要声明常量&#xff0c;请在类型说明符之前放入关键字CONSTANT。 常量必须在其声明中初始化。 每次输入块或子程序时&#xff0c;都会初始化常量。 以下代码显示如何定义REAL类型的常量&#xff0c;并为常量指定一个不可更改的值5。 DECLARE n_real CONSTANT RE…
阅读更多...
51单片机第27步_单片机工作在睡眠模式

51单片机第27步_单片机工作在睡眠模式

重点学习51单片机工作在睡眠模式。 1、进入“睡眠模式”的方法 通过将PCON寄存器中的PDWN置1&#xff0c;则CPU会进入“睡眠模式”。在“睡眠模式”中,晶振将停止工作&#xff0c;因此&#xff0c;定时器和串口都将停止工作&#xff0c;只有外部中断继续工作。如果单片机电源…
阅读更多...
最新文章

Copyright @ 2022~2023