【开发实践】网页预览excel表格原版样式

一、需求分析

由于业务部门需要,在导出excel表格页面,不需要先下载,就可以直接在页面上预览该表格文件。

二、代码实现

使用Luckysheet实现:

什么是Luckysheet
Luckysheet ,一款纯前端类似excel的在线表格,功能强大、配置简单、完全开源。

Luckysheet官网:Luckysheet官方在线文档

引入cdn:

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

【前后端数据处理】:

 后端返回给前端的数据,需要时流数据:

 /*** 下载文件** @param filePath 目标路径* @param response 响应请求*/public static void downloadExcelFiles(String filePath, String fileName, HttpServletResponse response, boolean delete) {try {// 读到流中File file = new File(filePath);// 设置输出的格式//设置中文文件名称fileName = URLEncoder.encode(fileName, "UTF-8");//浏览器默认服务器传过去的是html,不是excel文件//设置响应类型:传输内容是流,并支持中文response.setContentType("application/octet-stream;charset=UTF-8");//设置响应头信息header,下载时以文件附件下载response.setHeader("Content-Disposition", "attachment;filename=" + fileName);// 循环取出流中的数据if (file.exists()) {InputStream inStream = new FileInputStream(filePath);byte[] b = new byte[100];int len;while ((len = inStream.read(b)) > 0) {response.getOutputStream().write(b, 0, len);}inStream.close();if (delete) {deleteDir(new File(filePath).getParentFile().getParentFile());}}} catch (IOException e) {e.printStackTrace();}

前端请求:

axios({method: "post",url: url,responseType:'arraybuffer', //告诉服务器想到的响应格式headers: {}}).then(res => {that.getShowData(res)}).catch(function (error) {$.Notification.autoHideNotify('error', 'top right', '错误提示', '抱歉,服务器错误!');})//方法getShowData(res) {const data = res.datavar blob = new Blob([data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});// console.log("====blob====", blob)if (blob.size === 0) {return alert("数据不存在!");}const file = new window.File([blob], // blob'Filename.xlsx',{type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});// console.log("====file====", file)this.loadExcel(file)$('#full-width-modal').modal('show');},//加载方法loadExcel(files) {LuckyExcel.transformExcelToLucky(files, function (exportJson, luckysheetfile) {// console.log("transformExcelToLucky", files, exportJson)if (exportJson.sheets === null || exportJson.sheets.length === 0) {alert("读取excel文件内容失败,目前不支持xls文件!");return;}window.luckysheet.destroy();window.luckysheet.create({container: 'luckysheet', //luckysheet is the container idshowinfobar: false,data: exportJson.sheets,title: exportJson.info.name,userInfo: exportJson.info.name.creator,lang: 'zh', // 设定表格语言showinfobar: false,//是否显示顶部信息栏showtoolbar: false,//是否显示工具栏// showsheetbar: false,//是否显示底部sheet页按钮enableAddRow: false,//允许添加行// 自定义配置底部sheet页按钮showsheetbarConfig: {add: false,menu: false,},//自定义底部sheet页右击菜单sheetRightClickConfig: {delete: false, // 删除copy: false, // 复制rename: false, //重命名color: false, //更改颜色hide: false, //隐藏,取消隐藏move: false, //向左移,向右移},//自定义单元格右键菜单cellRightClickConfig: {copy: false, // 复制copyAs: false, // 复制为paste: false, // 粘贴insertRow: false, // 插入行insertColumn: false, // 插入列deleteRow: false, // 删除选中行deleteColumn: false, // 删除选中列deleteCell: false, // 删除单元格hideRow: false, // 隐藏选中行和显示选中行hideColumn: false, // 隐藏选中列和显示选中列rowHeight: false, // 行高columnWidth: false, // 列宽clear: false, // 清除内容matrix: false, // 矩阵操作选区sort: false, // 排序选区filter: false, // 筛选选区chart: false, // 图表生成image: false, // 插入图片link: false, // 插入链接data: false, // 数据验证cellFormat: false // 设置单元格格式}});});},

【效果图】


 如果文章对您有帮助的话,点赞支持一下吧!

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

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

相关文章

小程序如何进行一键修复

在使用小程序过程中&#xff0c;难免会遇到一些问题&#xff0c;比如程序崩溃、功能异常等等。这时&#xff0c;版本一键修复就显得尤为重要了。下面&#xff0c;我们就来介绍一下小程序如何进行版本一键修复。 一、什么是版本一键修复&#xff1f; 版本一键修复是指在小程序…

基于SSM的电商购物网站设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…

Buzz库python代码示例

Buzz库来编写一个下载器程序。 php <?php require_once vendor/autoload.php; // 引入Buzz库 use Buzz\Browser; use Buzz\Message\Response; $browser new Browser(); // 设置 $browser->setHttpClient(new HttpClientProxy([ host > , port > , ])…

当TinyMCE富文本编辑器遇到Vue3+nuxt+ts项目,分享引入成功案例及过程中踩的那些坑

文章目录 前言遇到的坑插入上传图片插件上传图片请求与返回值处理本地文件引入报错解决源码 前言 如果你的前端项目技术栈使用的是Vue3nuxtts&#xff0c;并且老大让你集成一下那个传说中非常丝滑的TinyMCE富文本编辑器&#xff0c;那么恭喜你和我一样中大奖了。 网上找了好久…

无人零售已成为新兴趋势

无人零售已成为新兴趋势 在新零售浪潮中&#xff0c;必然会涌现新的商业形态&#xff0c;而无人零售则是其中典型代表之一。传统零售受制于人力和场地等限制&#xff0c;消费者体验较差&#xff0c;如长时间排队、缓慢结账、距离过远等问题。而无人零售解决方案&#xff0c;包括…

绝地求生:成长型皮肤异色定价是否有些夸张?

大家好&#xff0c;我闲游盒小盒子&#xff01; 自从26.2更新上架回归的黑市中四款成长型皮肤以后&#xff0c;能看到社区里很多玩家都分享抽中了自己心仪的成长型皮肤。 但是对于异色很少有人去实装&#xff0c;大多数玩家都是选择去分解异色换取五张图纸然后追求升级原皮等级…

JVM GC算法

一, 垃圾回收分类: 按线程数分&#xff0c;可以分为串行垃圾回收器和并行垃圾回收器。 按工作模式分&#xff0c;可以分为并发垃圾回收器和独占式垃圾回收器 按碎片处理方式分&#xff0c;可以分为压缩式垃圾回收器和非压缩式垃圾回收器按工作的内存区间分&#xff0c;又可分为…

后台管理系统开源项目

最近项目没有什么事做&#xff0c;就自己整理&#xff0c;修改了一些vue2&#xff0c;react的后台管理系统项目&#xff0c;方便以后有需要可以直接提取&#xff0c;当然也方便了大家 vue2技术栈 lyl-vueProjectAdmin: vue2后台管理系统 react技术栈 lyl-reactAdminProject:…

《融合SCADA系统数据的天然气管道泄漏多源感知技术研究》误报数据识别模型开发

数据处理不作表述。因为我用的是处理后的数据&#xff0c;数据点这。 文章目录 工作内容1CC040VFD电流VFD转速压缩机转速反馈进出口差压 紧急截断阀开到位进出电动阀开到位发球筒电筒阀开到位收球筒电动阀开到位电动阀2005开到位越站阀开到位 工作内容2工作内容3 工作内容1 任…

【08】Python运算符

文章目录 1.算术运算符2.赋值运算符3.条件运算符4.逻辑运算符5.比较运算符6.运算符的优先级本期博客中,我们将学习python中常用的运算符的用法。              1.算术运算符 1.加法运算符(+): a = 10 b = 5 c = a + b print(c

08-学成在线项目中统一异常处理的规范

项目中的异常处理 规范异常类型 在Service类的业务方法中有很多的参数合法性校验,当请求参数不合法的时候会抛出异常,但此时异常信息只会在控制台输出,前端界面并不会提示用户 实际开发中前端和后端需要做一些约定: 一般将错误提示信息统一以json格式返回给前端,以HTTP状态码…

P9231 [蓝桥杯 2023 省 A] 平方差(拆分问题)

分析&#xff1a;x(yz)*(y-z); yz 与 y-z 同奇偶性&#xff08;x要么为奇数&#xff0c;要么为偶数&#xff09; 奇数&#xff1a;1 与 其本身 乘积 偶数&#xff1a;2 与 x/2 乘积(为4的倍数) #include<bit…

面试篇spark(spark core,spark sql,spark 优化)

一&#xff1a;为什么学习spark&#xff1f; 相比较map-reduce框架&#xff0c;spark的框架执行效率更加高效。 mapreduce的执行框架示意图。 spark执行框架示意图 spark的执行中间结果是存储在内存当中的&#xff0c;而hdfs的执行中间结果是存储在hdfs中的。所以在运算的时…

求和(打表题)

题目 打个表发现当 n 时答案为 p &#xff0c;否则为 1 &#xff0c;然后套板子。 #include <iostream> #include <algorithm> #include <vector> #include <cstring> #include <cmath>using namespace std;#define int long long using i64 …

卷积神经网络入门

1.卷积神经网络基本结构结构 卷积神经网络采用类似于动物视觉皮层组织中的神经元的连接模式&#xff0c;是一类包含卷积神经网络且具有深度结构的前馈神经网络。其基本结构如图2-1所示&#xff0c;大致包括&#xff1a;卷积层&#xff0c;激活函数&#xff0c;池化层&#xff…

Module build failed: Error: ENOENT: no such file or directory

前言 这个错误通常发生在Node.js 和 vue,js项目中&#xff0c;当你试图访问一个不存在的文件或目录时。在大多数情况下&#xff0c;这是因为你的代码试图打开一个不存在的文件&#xff0c;或者你的构建系统&#xff08;例如Webpack&#xff09;需要一个配置文件&#xff0c;但找…

<JavaDS> 二叉树遍历各种遍历方式的代码实现 -- 前序、中序、后序、层序遍历

目录 有以下二叉树&#xff1a; 一、递归 1.1 前序遍历-递归 1.2 中序遍历-递归 1.3 后序遍历-递归 二、递归--使用链表 2.1 前序遍历-递归-返回链表 2.2 中序遍历-递归-返回链表 2.3 后序遍历-递归-返回链表 三、迭代--使用栈 3.1 前序遍历-迭代-使用栈 3.2 中序遍…

服务器bash进程占用cpu过多疑似中挖矿病毒记录

发现过程 因为我有使用conky的习惯&#xff0c;也就是在桌面上会显示cpu和内存的占用情况&#xff0c;由于服务器不止我一个人使用&#xff0c;最近发现好几次我同学的账户下的bash进程占用特别多&#xff0c;问了他之后&#xff0c;他也说他几次都是没有使用过bash相关服务&a…

【LeetCode】每日一题 2023_11_28 设计前中后队列(数组/链表/双端队列)

文章目录 刷题前唠嗑题目&#xff1a;设计前中后队列题目描述代码与解题思路偷看大佬题解 结语 刷题前唠嗑 LeetCode&#xff1f;启动&#xff01;&#xff01;&#xff01; 这道题的难度&#xff0c;才是我想象中的中等题的难度好吧&#xff0c;昨天那玩意对我来说还是太难了…

9.Spring 整合 Redis

引入依赖&#xff1a;spring-boot-starter-data-redis配置 Redis&#xff1a;配置数据库参数、编写配置类&#xff0c;构造 RedisTemplate访问 Redis&#xff1a; redisTemplate.opsForValue() redisTemplate.opsForHash() redisTemplate.opsForList() redisTemplate.opsForSe…