概述

本文基于luckysheet实现在线的电子表格，并基于luckyexcel实现excel文件的导入和在线预览。

效果

实现

1. luckysheet介绍

Luckysheet ，一款纯前端类似excel的在线表格，功能强大、配置简单、完全开源。

• 官方文档
• 在线Demo

2. 实现

2.1 引入插件

本实例中直接引入编译好的js和css文件，需要引入的文件如下：

<link rel="stylesheet" type="text/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"></script>

2.2 在线编辑器实现

<template><div class="online-table" :id="domId"></div>
</template><script>
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()},},
}
</script><style scoped lang="scss">
.online-table {width: 100%;height: calc(100% - 4rem);
}
</style>

2.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中实现在线画流程图实现
• 基于语雀编辑器的在线文档编辑与查看