概述

本文基于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.data
      window.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 id
			data: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.fileUrl
        window.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, //新增sheet
              menu: false, //sheet管理菜单
              sheet: true, //sheet页显示
            },
            forceCalculation: true, //强制计算公式
          })
        })

---

相关文章

• Vue中使用mind-map实现在线思维导图
• Vue中实现在线画流程图实现
• 基于语雀编辑器的在线文档编辑与查看