springboot+Vue整合Luckysheet,实现在线编辑Excel表格
springboot+Vue整合Luckysheet,实现在线编辑Excel表格
功能:页面嵌入Luckysheet表格组件,能够在线编辑Excel表格,实现表格的读取,保存功能(不支持导出为xls文件,只能在线编辑);
效果:
luckysheet: Luckysheet(https://github.com/mengshukeji/Luckysheet)是一款轻量的在线Excel渲染框架,易集成使用。支持二次开发。
Vue代码:
<div id="luckysheet" style="position:relative;width:100%;height:96%;right: 0px;top: 0px;"></div>
mounted() {this.init();
},
methods:{init() {const options = {container: 'luckysheet', // 设定DOM容器的idcolumn: 30, //空表格默认的列数量row: 30, //空表格默认的行数据量// title:"title001",lang: 'zh', // 设定表格语言allowEdit: true,//作用:是否允许前台编辑// allowUpdate: true,allowCopy: true, //是否允许拷贝showtoolbar: true, //是否第二列显示工具栏showinfobar: true, //是否显示顶部名称栏showsheetbar: true, //是否显示底部表格名称区域showstatisticBar: true, //是否显示底部计数栏pointEdit: false, //是否是编辑器插入表格模式pointEditUpdate: null, //编辑器表格更新函数//data: [], //这里是表格的数据 若要展示数据functionButtom: '<button id="" class="btn btn-primary" style="padding:3px 6px;font-size: 12px;margin-right: 10px;">下载</button> <button id="" class="btn btn-primary btn-danger" style=" padding:3px 6px; font-size: 12px; margin-right: 10px;">分享</button> <button id="luckysheet-share-btn-title" class="btn btn-primary btn-danger" style=" padding:3px 6px; font-size: 12px; margin-right: 10px;">秀数据</button>' //这里是按钮组数据,不知道为什么不显示}// 初始化表格luckysheet.create(options) // 此处的luckysheet为上面div容器的id}})// 配置项}
用到的Api:
luckysheet.getAllSheets() //获取表格的全部配置与内容 为json数组格式。实现思路:将此json数组转为json字符串,储存到后台(保存),需要时从后台获取json字符串,转为json数组。再放到options中的data,即可渲染此数据到表格中(读取)。
springboot+Vue整合Luckysheet,实现在线编辑Excel表格相关推荐
- vue 在线编辑excel表格(原生和使用组件的两种方式)
vue 在线编辑excel表格(原生和使用组件的两种方式) top表头和left表头格式的表格 <template><div><!-- 用组件写的编辑表格 -->& ...
- html excel 在线编辑,利用js实现在线编辑excel表格代码
特效描述:利用js实现 在线编辑 excel 表格代码.利用js实现在线编辑excel表格代码 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 function load(){ x ...
- vue集成Luckyexcel实现在线编辑Excel,可自行导入,也可从服务器端获取
安装 依赖 npm install luckyexcel 在页面中引入 import LuckyExcel from 'luckyexcel' html中 <div id="lucky ...
- 利用EasyExcel完整的springboot +vue前后端导出并下载excel表格
文章目录 写在前面 正文 1. springboot后端引入easyexcel及使用 1.1 引入依赖 1.2 接口serviceImpl方法 1.3 提供一个对list集合去重的方法(根据相同key ...
- luckysheet实现在线编辑Excel
官网有两种引入依赖的方法,一种cdn,一种本地引入 本文介绍的是本地引入的方式. 从官网下载源码:https://gitee.com/mengshukeji/Luckysheet 线上引用js: &l ...
- react在线编辑Excel表格
效果如上图, 引用:SpreadJS 下载 react例子 运行后如图
- ①. SpringBoot整合PageOffice实现在线编辑Word和Excel
①. SpringBoot整合PageOffice实现在线编辑Word和Excel PageOffice官网: http://www.zhuozhengsoft.com/ PageOffice集成说明 ...
- Vue实现在线编辑excel、导入、导出
文章目录 概要 整体架构流程 小结 概要 Vue实现在线编辑excel.导入.导出 整体架构流程 luckysheet文档地址 exceljs文档地址 1.npm安装依赖 npm i exceljs ...
- Vue实现在线编辑excel
目录 luckysheet 1.插件引入 2.声明excel在线预览编辑组件 3.excelJs分解Dom为excel文件流 luckysheet文档地址 exceljs文档地址 前言介 ...
最新文章
- java方法的参数_Java方法参数
- 针对监控摄像机(海康、大华等)进行手动录像的录像文件播放器功能设计
- wxWidgets:wxTreeEvent类用法
- opencv中查看mat位图的像素幅度(Cv::matStep)
- bat复制文件到指定目录同名_scp复制文件时排除指定文件
- c++读出像素矩阵_Python传numpy矩阵调c++(求3D图像连通区域)
- DNS域名系统(二)
- 想成为优秀的技术人员你必须做到的几件事情【转载】
- 交友小程序服务器,又是陌生人交友小程序,探探Lite到底有什么不同?
- python题库大一_1000道Python题库系列分享三
- CorelDRAW最好用免费稳定版本win,mac版本做图设计使用技巧教程
- 基于DSP的主动降噪开发之三(CCS软件学习)
- 药物组合疗法的机器学习方法(综述类)
- Android数据传输加密(三):RSA加密
- SpringCloud集成分布式事务LCN
- 【Python】美国大选献金项目数据分析(concat(),lambda(),groupby(),pivot_table())
- web服务器是什么?web服务器有哪些
- WebGIS-分辨率与比例尺
- CRMEB去除版权信息教程
- linux上面跑lvgl GUI简单实例
热门文章
- python非线性可分支持向量机模型(实现iris分类)
- oracle sql中( ),Oracle SQL中的函数
- iOS(iPhone,iPad))开发(Obje…
- QT安装我i发下载存档问题解决
- 堪称货拉拉混合云数据库建设史,一场DBA团队的逆袭之战
- Linux(四)——CROND和磁盘分区与挂载
- Win10下双系统Ubuntu14.04+GTX1070+CUDAcuDNN+Tensorflow环境搭建
- (附源码)php柘城县农产品销售网站 毕业设计 020832
- 卡通人物数据集下载地址
- bzoj3168 [Heoi2013]钙铁锌硒维生素(矩阵求逆+匈牙利)