luckysheet+luckyexcel在线预览excel

luckysheet，是一款纯前端的在线excel，功能强大，完全开源
如果在线预览excel的需求，可以使用xlsx插件，但是这个插件只能解析表格中的数据，如果表格中的样式和数据都要解析出来，就需要luckysheet+luckyexcel方案，下面整理一下，vue项目中怎么使用
1.luckysheet需要手动引入相关文件

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/plugins.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/css/luckysheet.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/assets/iconfont/iconfont.css' />
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js"></script>

2.安装luckyexcel，npm i luckyexcel
3.写一个vue组件测试一下，根据luckysheet官方文档和demo可以进行配置，里面有很多配置，下面的代码是参考官方demo的，删减了一下，主要需求是打开本地excel，先看一下打开效果(本地excel带样式的，在线打开还是带样式的)

<template><div><div style="position: absolute; top: 0"><input style="font-size: 16px" type="file" @change="uploadExcel" /></div><divid="luckysheet"style="margin: 0px;padding: 0px;position: absolute;width: 100%;left: 0px;top: 30px;bottom: 0px;"></div></div>
</template><script>
import LuckyExcel from "luckyexcel";export default {mounted() {$(function () {luckysheet.create({container: "luckysheet", // 设定DOM容器的idtitle: "Luckysheet Demo", // 设定表格名称lang: "zh", // 设定表格语言plugins: ["chart"],data: [{name: "Cell", //工作表名称color: "", //工作表颜色index: 0, //工作表索引status: 1, //激活状态order: 0, //工作表的下标hide: 0, //是否隐藏row: 36, //行数column: 18, //列数defaultRowHeight: 19, //自定义行高defaultColWidth: 73, //自定义列宽celldata: [], //初始化使用的单元格数据config: {merge: {}, //合并单元格rowlen: {}, //表格行高columnlen: {}, //表格列宽rowhidden: {}, //隐藏行colhidden: {}, //隐藏列borderInfo: {}, //边框authority: {}, //工作表保护},scrollLeft: 0, //左右滚动条位置scrollTop: 315, //上下滚动条位置luckysheet_select_save: [], //选中的区域calcChain: [], //公式链isPivotTable: false, //是否数据透视表pivotTable: {}, //数据透视表设置filter_select: {}, //筛选范围filter: null, //筛选配置luckysheet_alternateformat_save: [], //交替颜色luckysheet_alternateformat_save_modelCustom: [], //自定义交替颜色luckysheet_conditionformat_save: {}, //条件格式frozen: {}, //冻结行列配置chart: [], //图表配置zoomRatio: 1, // 缩放比例image: [], //图片showGridLines: 1, //是否显示网格线dataVerification: {}, //数据验证配置},{name: "Sheet2",color: "",index: 1,status: 0,order: 1,celldata: [],config: {},},{name: "Sheet3",color: "",index: 2,status: 0,order: 2,celldata: [],config: {},},],});});},methods: {uploadExcel(evt) {const files = evt.target.files;if (files == null || files.length == 0) {alert("No files wait for import");return;}let name = files[0].name;let suffixArr = name.split("."),suffix = suffixArr[suffixArr.length - 1];if (suffix != "xlsx") {alert("Currently only supports the import of xlsx files");return;}LuckyExcel.transformExcelToLucky(files[0],function (exportJson, luckysheetfile) {if (exportJson.sheets == null || exportJson.sheets.length == 0) {alert("Failed to read the content of the excel file, currently does not support xls files!");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,});});},},
};
</script><style>
</style>

luckysheet+luckyexcel在线预览excel相关推荐

HTML实现在线预览Excel,word,ppt
使用office提供的在线预览功能 https://view.officeapps.live.... src后面接你需要预览的文件下载地址. 如果不能实现预览功能,提示报错请检查http返回的Con ...
vue 实现在线预览excel
一.思路由于项目中要求excel能够在线预览,且excel文件并非本地而是后端那边提供的.因此提供一下本人在项目的解决思路: 1.让后端返回二进制文件流 2.将文件流转为file对象 3.通过luc ...
vue在线预览excel
最便捷的预览方式可以使用微软提供的方法: window.open( "https://view.officeapps.live.com/op/view.aspx?src=" ur ...
web浏览器在线预览Excel，PDF，world文档解决方案
众所周知啊,在web浏览器中是无法直接预览Excel.world文档等文件的,PDF有的浏览器是打开预览,有的浏览器是跳转到下载页,行为不一致也是让开发者头疼的事情. 今天给大家提供一个解决方案,实现 ...
android在线预览excel文件格式,Android打开doc、xlsx、ppt等office文档解决方案
原标题:Android打开doc.xlsx.ppt等office文档解决方案 1.Android端有什么控件可以直接显示office文档吗? 很抱歉没有,对于ios而言想要显示office文档,直接调 ...
vue项目使用luckyexcel插件预览excel表格
温馨提示:需要用到luckysheet文件和luckyexcel插件,根据下面步骤一步一步操作会避免踩坑,比如我当时遇到了window.luckysheet is not defined控制台报红的问 ...
Vue+SpringBoot实现Excel在线预览功能（PS：添加样式比较费劲）
** 问题还原: ** 在做项目时,用户需要上传Excel模板,里面有对应的各种数据.我们拿到这个Excel后,定时的根据其中的数据去查对应的实时数据并进行计算,然后将实时数据和计算后的数据保存到Ex ...
nopi word to html,C# 基于NPOI+Office COM组件实现20行代码在线预览文档（word，excel，pdf，txt，png）...
由于项目需要,需要一个在线预览office的功能,小编一开始使用的是微软提供的方法,简单快捷,但是不符合小编开发需求, 就另外用了:将文件转换成html文件然后预览html文件的方法.对微软提供的方法 ...
❤️强烈推荐！Word、Excel、PPT、PDF在线预览解决方案
大家好,我是锋哥: 平时大伙开发项目的时候,经常遇到业务需求Word.Excel.PPT.PDF在线预览功能: 市面上这方面的解决方案也有一些,不做过多评价.今天主要推荐的是一个特定提前下的永久免费解 ...

luckysheet+luckyexcel在线预览excel

luckysheet+luckyexcel在线预览excel相关推荐

最新文章

热门文章