淘宝客怎么在网站做推广,免费申请网页,广州市数商云,微信公众平台如何与wordpress对接实现自动回复功能概述
本文基于luckysheet实现在线的电子表格#xff0c;并基于luckyexcel实现excel文件的导入和在线预览。
效果 实现
1. luckysheet介绍
Luckysheet #xff0c;一款纯前端类似excel的在线表格#xff0c;功能强大、配置简单、完全开源。
官方文档在线Demo
2. 实现
…概述
本文基于luckysheet实现在线的电子表格并基于luckyexcel实现excel文件的导入和在线预览。
效果 实现
1. luckysheet介绍
Luckysheet 一款纯前端类似excel的在线表格功能强大、配置简单、完全开源。
官方文档在线Demo
2. 实现
2.1 引入插件
本实例中直接引入编译好的js和css文件需要引入的文件如下
link relstylesheet typetext/css href/lib/luckysheet/luckysheet.css /
script src/lib/luckysheet/plugin.js/script
script src/lib/luckysheet/luckysheet.umd.js/script
script src/lib/luckysheet/luckyexcel.umd.js/script2.2 在线编辑器实现
templatediv classonline-table :iddomId/div
/templatescript
export default {props: {tableData: {type: Object,default: () null,},name: {type: String,default: 新建表格,}},mounted() {this.$nextTick(() {this.init()})},watch: {tableData() {this.init()},},data() {return {domId: onlineTableDom,}},unmounted() {window.luckysheet.destroy()},methods: {init() {let options {container: this.domId,title: this.name,lang: zh,showinfobar: false, // 右上角的用户信息展示样式plugins: [],}options.showtoolbarConfig {undoRedo: false,currencyFormat: false, //货币格式percentageFormat: false, //百分比格式numberDecrease: false, // 减少小数位数numberIncrease: false, // 增加小数位数textRotateMode: false, // 文本旋转方式image: false, // 插入图片chart: false, // 图表图标隐藏但是如果配置了chart插件右击仍然可以新建图表postil: false, //批注screenshot: false, // 截图findAndReplace: false, // 查找替换moreFormats: false, // 更多格式}if (this.tableData) options.data this.tableData.datawindow.luckysheet.create(options)},getData() {return window.luckysheet.toJson()},},
}
/scriptstyle scoped langscss
.online-table {width: 100%;height: calc(100% - 4rem);
}
/style2.3 打开Excel文件
LuckyExcel.transformExcelToLucky(file, function(exportJson, luckysheetfile){// 获得转化后的表格数据后使用luckysheet初始化或者更新已有的luckysheet工作簿// 注luckysheet需要引入依赖包和初始化表格容器才可以使用luckysheet.create({container: luckysheet, // luckysheet is the container iddata:exportJson.sheets,title:exportJson.info.name,userInfo:exportJson.info.name.creator});},function(err){logger.error(Import failed. Is your fail a valid xlsx?);}
);2.4 在线预览excel const url this.fileUrlwindow.LuckyExcel.transformExcelToLuckyByUrl(url, 测试文件, function (exportJson) {if (exportJson.sheets null || exportJson.sheets.length 0) {return}window.luckysheet.create({container: attachment,data: exportJson.sheets,title: exportJson.info.name,userInfo: exportJson.info.name.creator,showtoolbar: false, // 是否显示工具栏showinfobar: false, // 是否显示顶部信息栏allowEdit: false,enableAddRow: false, // 允许增加行enableAddCol: false, // 允许增加列showRowBar: false, // 是否显示行号区域showColumnBar: false, // 是否显示列号区域sheetFormulaBar: false, // 是否显示公式栏enableAddBackTop: false, //返回头部按钮rowHeaderWidth: 0, //纵坐标columnHeaderHeight: 0, //横坐标showstatisticBarConfig: {count: false,view: false,zoom: false,},hook: {cellMousedown() {return false},},showsheetbarConfig: {add: false, //新增sheetmenu: false, //sheet管理菜单sheet: true, //sheet页显示},forceCalculation: true, //强制计算公式})})相关文章
Vue中使用mind-map实现在线思维导图Vue中实现在线画流程图实现基于语雀编辑器的在线文档编辑与查看
