excel文件预览: luckyexcel+luckysheet

luckyexcel 使用

npm i luckyexcel --save

luckysheet 使用 luckysheet文档

  1. 克隆Luckysheet源码到本地
git clone https://github.com/dream-num/Luckysheet.git
  1. 安装依赖
npm install
npm install gulp -g  
  1. 开发
npm run dev
  1. 打包
npm run build

本地引入
npm run build 后 dist 文件夹下的所有文件复制到vue项目的public目录下,然后在index.html文件中通过相对路径引入:

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

表格容器

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

1.预览本地文件/后端返回文件流文件

      // 获取文件流
      const token = '用户token'
      axios.get('你的接口地址', {
        headers: { 'Token': token },
        responseType: 'blob',
        params: {
          // 参数
        }
      }).then((response) => {
        // 将获取到的文件对象传递给 uploadExcel 方法
        const file = new File([response.data], 'XXX.xlsx', { type: response.data.type });
      })
      .catch((error) => {
        console.error('文件获取失败:', error);
      })
import LuckyExcel from 'luckyexcel'

LuckyExcel.transformExcelToLucky(file, (exportJson, luckysheetfile) => {
   if(exportJson.sheets==null || exportJson.sheets.length==0){
       console.log("文件读取失败!");
       return;
   }
   // 销毁原来的表格
   luckysheet.destroy();
   // 重新创建新表格
   exportJson.sheets[0].defaultRowHeight = 25  // 行高
   luckysheet.create({
      container: 'luckysheet', // 设定DOM容器的id
      column: 15,
      row: 30,
      showtoolbar: false, // 是否显示工具栏
      showinfobar: false, // 是否显示顶部信息栏
      showsheetbarConfig:{
          add: false,
          menu: false,
      },
      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 // 设置单元格格式
       },
       showstatisticBar: false, // 是否显示底部计数栏
       sheetBottomConfig: false, // sheet页下方的添加行按钮和回到顶部按钮配置
       allowEdit: false, // 是否允许前台编辑
       enableAddRow: false, // 是否允许增加行
       enableAddCol: false, // 是否允许增加列
       sheetFormulaBar: false, // 是否显示公式栏
       enableAddBackTop: false, //返回头部按钮
       data: exportJson.sheets, //表格内容
       title: exportJson.info.name, //表格标题
    });
});

2.excel文件地址

LuckyExcel.transformExcelToLuckyByUrl(excelUrl, excelName, (exportJson, luckysheetfile) => {})

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

网络分析工具

为了实现业务目标&#xff0c;每天都要在网络上执行大量操作&#xff0c;网络管理员很难了解网络中实际发生的情况、谁消耗的带宽最多&#xff0c;并分析是否正在发生任何可能导致带宽拥塞的活动。对于大型企业和分布式网络来说&#xff0c;这些挑战是多方面的&#xff0c;为了…

AI边缘计算盒子+ThingSense管理平台,推动明厨亮灶智慧监管新篇章

背景随着“互联网”时代的浪潮汹涌而至&#xff0c;国家及各地政府纷纷在“十四五”规划中明确指出&#xff0c;强化食品安全管理&#xff0c;利用技术手段实现智慧监管是刻不容缓的任务。为此&#xff0c;各地正加速推进“互联网明厨亮灶”的建设步伐&#xff0c;实现系统对接…

C# 报输入字符串格式不正确的原因

先放错误代码 23 class Voicewater 24 { 25 public void voicealarm(int tem) 26 { 27 Console.WriteLine("现在的温度是{}度了",tem); 28 } 29 } 解决方法…

14 Php学习:表单

表单 PHP 表单是用于收集用户输入的工具&#xff0c;通常用于网站开发。PHP 可以与 HTML 表单一起使用&#xff0c;用于处理用户提交的数据。通过 PHP 表单&#xff0c;您可以创建各种类型的表单&#xff0c;包括文本输入框、复选框、下拉菜单等&#xff0c;以便用户可以填写和…

Create an SAP Fiori App Using SAP Business Application Studio/连接时服务不可用

Create an SAP Fiori App Using SAP Business Application Studio 如果连接时遇到服务不可用 我们需要配置BTP上的连接。 参考文档 更改之后需要刷新 studio界面&#xff0c;重新选择就可以正常工作了

Linux 基于 UDP 协议的简单服务器-客户端应用

目录 一、socket编程接口 1、socket 常见API socket()&#xff1a;创建套接字 bind()&#xff1a;将用户设置的ip和port在内核中和我们的当前进程关联 listen() accept() 2、sockaddr结构 3、inet系列函数 二、UDP网络程序—发送消息 1、服务器udp_server.hpp initS…

【随笔】Git 高级篇 -- 远程服务器拒绝 git push reset(三十二)

&#x1f48c; 所属专栏&#xff1a;【Git】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &#x1f496; 欢迎大…

vue中使用水印

1. 在utils下创建watermark.js const watermark {}/**** param {要设置的水印的内容} str* param {需要设置水印的容器} container* param {需要设置水印的每一块的宽度} canWidth* param {需要设置水印的每一块的高度} canHeight* param {需要设置水印的字体} canFont* para…

【IDEA】JRebel LS client not configured

主要原因就是因为 jrebel 的版本跟 idea的版本对不上&#xff0c;或者说jrebel的版本比idea的版本还高&#xff0c;导致出现该错误 查看idea版本 ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/a7ba43e6822947318cdb0d0e9d8d65e9.png 获取jrebel 版本 如何处理 …

“好”玩游戏让我本能痴迷游戏编程

源地址&#xff1a;https://www.ctvol.com/c-cdevelopment/5842.html 我的游戏生涯是从最开始的热血传奇开始的&#xff0c;那时候&#xff0c;我们年少轻狂&#xff0c;不知道多少80后的青春都洒在了这个游戏上面&#xff0c;那时候&#xff0c;热血传奇的热度比现在的英雄联…

【C++20】学习笔记:在事件驱动使用携程

2021年文章:比物理线程都好用的C++20的协程,在事件驱动代码中的应用解析 大神给出了可以用的例子:例子代码执行 源码 //https://bbs.huaweicloud.com/blogs/266537 #include <iostream> #include <vector>//这只是一个极简的模型示例,真实的代码要远比它复杂得…

在PostgreSQL中如何处理跨表的级联删除和更新?

文章目录 解决方案1. 使用外键约束和级联操作创建外键约束并指定级联删除创建外键约束并指定级联更新 2. 使用触发器&#xff08;Triggers&#xff09;创建触发器实现级联删除 示例代码示例1&#xff1a;使用外键约束和级联删除示例2&#xff1a;使用触发器实现级联删除 在Post…

Python根据公募基金在一定时期内持有的股票数据进行社会网络分析

【背景】根据提供的公募基金在一定时期内持有的股票数据&#xff0c;构建一个社会网络分析框架&#xff0c;度量每个基金在每年的度中心度、介数中心度和特征向量中心度&#xff0c;并对相关数据做出简要说明。 【代码】 import networkx as nx import pandas as pd import n…

Rust 语言 GUI 用户界面框架汇总(持续更新)

拜登&#xff1a;“一切非 Rust 项目均为非法”&#x1f60e; 什么是 GUI 图形用户界面&#xff08;Graphical User Interface&#xff0c;简称 GUI&#xff0c;又称图形用户接口&#xff09;是指采用图形方式显示的计算机操作用户界面。 现在的应用开发&#xff0c;是既要功…

机器人路径规划:基于Q-learning算法的移动机器人路径规划,可以自定义地图,修改起始点,提供MATLAB代码

一、Q-learning算法 Q-learning算法是强化学习算法中的一种&#xff0c;该算法主要包含&#xff1a;Agent、状态、动作、环境、回报和惩罚。Q-learning算法通过机器人与环境不断地交换信息&#xff0c;来实现自我学习。Q-learning算法中的Q表是机器人与环境交互后的结果&#…

设计模式系列:适配器模式

简介 适配器模式&#xff08;Adapter Pattern&#xff09;又称为变压器模式&#xff0c;它是一种结构型设计模式。适配器模式的目的是将一个类的接口转换成客户端所期望的另一种接口&#xff0c;从而使原本因接口不匹配而不能一起工作的两个类能够一起工作。 适配器模式有两种…

润开鸿与蚂蚁数科达成战略合作,发布基于鸿蒙的mPaaS移动应用开发产品

4月18日&#xff0c;江苏润和软件股份有限公司&#xff08;以下简称“润和软件”&#xff09; 旗下专注鸿蒙方向的专业技术公司及终端操作系统发行版厂商江苏润开鸿数字科技有限公司&#xff08;以下简称“润开鸿”&#xff09;与蚂蚁数科举行战略合作签约仪式&#xff0c;并发…

腾讯后端一面:当 TCP 建立连接之后,TCP 和 UDP 的实时性是不是就差不多了?

更多大厂面试内容可见 -> http://11come.cn 腾讯后端一面&#xff1a;当 TCP 建立连接之后&#xff0c;TCP 和 UDP 的实时性是不是就差不多了&#xff1f; 项目相关 面试官可能是 Go 方向的&#xff0c;我面试的是 Java 方向的&#xff0c;所以面试官也没有问我简历上的项…

Uniswap丨justswap丨pancakeswap去中心化薄饼交易所系统开发

开发去中心化薄饼交易所系统&#xff08;如Uniswap、JustSwap、PancakeSwap&#xff09;是一个复杂而有挑战性的任务&#xff0c;需要综合考虑技术、安全、用户体验和合规等方面。以下是开发这样一个系统时需要考虑的关键方面&#xff1a; 1. 技术架构 智能合约开发&#xff1…

【智能算法】鸡群优化算法(CSO)原理及实现

目录 1.背景2.算法原理2.1算法思想2.2算法过程 3.结果展示4.参考文献 1.背景 2014年&#xff0c;X Meng等人受到鸡群社会行为启发&#xff0c;提出了鸡群优化算法&#xff08;Chicken Swarm Optimization, CSO&#xff09;。 2.算法原理 2.1算法思想 CSO算法的思想是基于对…
最新文章