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容器的idcolumn: 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.mzph.cn/web/1426.shtml

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

相关文章

Ansible 连接受控端sudo超时

最近在装Ansible&#xff0c;有一台受控端负载重&#xff0c;响应慢。当用Ansible连接它时&#xff0c;总是提示超时。 现象 主控端 执行脚本 ansible 192.168.5.37 -m shell -a ip a| grep 192.168.192.168.5.37 | FAILED | rc-1 >> Timeout (12s) waiting for priv…

【Android】Activity task和Instrumentation杂谈

文章目录 activity taskInstrumentation机制参考 Android不仅可以装载众多的系统组件&#xff0c;还可以将它们跨进程组成ActivityTask&#xff0c;这个特性使得每个应用都不是孤立的。 activity task 从数据结构角度看&#xff0c;Task有先后之分&#xff0c;源码实现上采取了…

基于SpringBoot+Vue钢材销售管理系统的设计与实现

系统介绍 为了更好地发挥本系统的技术优势&#xff0c;根据钢材销售管理系统的需求&#xff0c;本文尝试以B/S经典设计模式中的Spring Boot框架&#xff0c;JAVA语言为基础&#xff0c;通过必要的编码处理、钢材销售管理系统整体框架、功能服务多样化和有效性的高级经验和技术…

高级IO简介

一、非阻塞IO 阻塞其实就是进入了休眠状态&#xff0c;交出了 CPU 控制权。 普通文件的读写操作是不会阻塞的&#xff0c;不管读写多少个字节数据&#xff0c; read() 或 write() 一定会在有限的时间内返回&#xff0c;所以普通文件一定是以非阻塞的方式进行 I/O 操作&…

【Visual Studio 2012中文版】下载安装以及使用方法

文章目录 前言一、下载安装包二、安装步骤1.双击VS2012_ULT_chs.iso文件打开2.双击vs_ultimate.exe打开安装程序3.选择要安装的功能4.软件正在安装&#xff0c;请耐心等待10分钟5.安装成功&#xff0c;点击“启动”6.激活码&#xff08;产品密钥&#xff09; 三、VS2012使用&am…

CRMEB Pro版营销功能规则解读

现在&#xff0c;无论是中小型企业拓宽渠道&#xff0c;还是传统企业转型&#xff0c;基本都在考虑布局线上&#xff0c;做微商城是一大趋势&#xff0c;相比传统第三方电商平台&#xff0c;独立部署的商城系统自主性更强&#xff0c;功能开发也更灵活。其中&#xff0c;作为电…

Java基础----字节流和字符流

1.使用字节流拷贝文件夹 import java.io.*;public class Tset01 {public static void main(String[] args) throws IOException {//拷贝一个文件夹&#xff0c;考虑子文件夹//E:\hello -> E:\aaaFile srcnew File("E:\\hello");File destnew File("E:\\dest…

英语写作中available容易忽略的用法

Available 的一般用法没有问题&#xff0c;但它的下面用法容易被我们忽略。 比较下面两句&#xff1a; There is no water. There is no water available. 这两句都翻译为“没有水”&#xff0c;但上一句的意思就是“没有水”&#xff0c;而下一句意味着“需要水但没有水”…

vue3 -- 项目使用自定义字体font-family

在Vue 3项目中使用自定义字体(font-family)的方法与在普通的HTML/CSS项目中类似。可以按照以下步骤进行操作: 引入字体文件: 首先,确保你的字体文件(通常是.woff、.woff2、.ttf等格式)位于项目中的某个目录下,比如src/assets/font/。 在全局样式中定义字体: 在你的全局…

[阅读笔记25][WebArena]A Realistic Web Environment for Building Autonomous Agents

这篇论文提出了WebArena这个环境与测试基准&#xff0c;在24年1月发表。 之前的agent都是在一些简化过的合成环境中测试的&#xff0c;这会导致与现实场景脱节。这篇论文构建了一个高度逼真、可复现的环境。该环境涉及四个领域&#xff1a;电子商务、论坛讨论、软件开发和内容管…

多种情况下合并单元格(S-Table+Vue3)

合并单元格(S-TableVue3) 跨行合并&#xff1a;rowspan“合并单元格的个数” 跨列合并&#xff1a;colspan"“合并单元格的个数” 文章目录 合并单元格(S-TableVue3)第一列跨行合并单元格templatescript效果 多列跨行合并单元格templatescript效果图 多行合并可参考 第一列…

exceljs库实现excel表样式定制化

概览 xlsx 是前端最热门的 Excel 导出方案&#xff0c;又叫做 SheetJs&#xff0c;默认不支持修改 Excel 的样式。而exceljs库就可以做到自定义excel表样式&#xff0c;下面来介绍一下其使用方法 一. 完整示例 代码示例 const exportTemplate2 () > { // 创建工作簿 …

Electron桌面应用开发:从入门到发布全流程解析

Electron是一个开源的桌面应用程序开发框架&#xff0c;它允许开发者使用Web技术&#xff08;HTML、CSS和JavaScript&#xff09;来创建跨平台的桌面应用程序。在本文中&#xff0c;我们将深入探讨Electron桌面应用程序开发的全流程&#xff0c;从入门到发布。 安装和配置Elec…

iOS ------ Block的总结

前面看了Block的基本知识&#xff0c;和一些源码。但对于block怎么用的还不了解&#xff0c;代码中出现block会看不懂&#xff0c;现在来具体看一下Block的用法并做个总结。 1.Block是什么 block对象是一个C语言结构体&#xff0c;可以并入C和OC的代码中&#xff0c;Block本质…

探索以太坊世界:使用Geth打造你的私人网络

文章目录 概要名词解释Geth&#xff08;Go Ethereum&#xff09;区块链网络种类 具体流程下载geth客户端配置私链新建创世区块启动私链 连接MetaMask钱包小结 概要 在区块链领域&#xff0c;以太坊私链的搭建是学习和开发智能合约的重要一步。私链允许开发者在独立的环境中进行…

地图图源#ESRI ArcGIS XYZ Tiles系列(TMS)

目录 1、前言 2、地图图源网址 2.1、Satellite 卫星图源 2.2、Terrain 地形图源 2.3、Street 路网/标注图源 2.4、Specifity 特色设计图源 3、专业推荐”穿搭“ 4、图源配置下载及使用 图源名称图层类别特别注意谷歌 Google①地形 ②影像 ③矢量及标注 ④特色图源国内大…

python3如何提取汉字

采用正则表达式的方法对字符串进行处理。 str1 "&#xff5b;我%$是&#xff0c;《速$.度\发》中 /国、人"&#xff08;1&#xff09;提取汉字 汉字的范围为”\u4e00-\u9fa5“&#xff0c;这个是用Unicode表示的。 import re res1 .join(re.findall([\u4e00-\u9fa…

sso-oauth2单点登录功能笔记

场景&#xff1a;最近公司2个系统需要做单点登录&#xff0c;A系统作为服务器&#xff0c;认证方式是sso-oauth2方式&#xff0c;B系统作为客户端&#xff0c;token方式是ta-token&#xff0c;先来张sso-oauth2认证方式的图 前置准备工作 第一步&#xff1a;要确认谁是服务提…

kubernetes的网络通信实现原理

网络原理 Kubernetes网络原理详解&#xff1a;一、Kubernetes 网络实现1.容器到容器&#xff08;同一Pod内&#xff09;通信流程&#xff1a;2. pod之间的通信&#xff08;以Calico为例&#xff09;&#xff1a; 二、CNI 网络模型三、网络策略四、开源的容器网络方案五、 常见网…

oracle控制文件的管理

1 说明 Oracle数据库中的控制文件是数据库管理中的重要组成部分&#xff0c;是一个二进制小文件&#xff0c;在 mount 阶段被读取。它包含了数据库的元数据信息和文件位置等重要数据&#xff0c;记录数据库当前物理状态&#xff0c;维护数据库的一致性&#xff0c;记录 RMAN 备…