当前位置: > > > Vue.js - 实现前端excel表格预览功能(Luckysheet+Luckyexcel)

Vue.js - 实现前端excel表格预览功能(Luckysheet+Luckyexcel)

    最近项目需要实现一个 excel 表格在线预览功能,即前端通过后台提供的 xlsx 文件路径,自动加载并显示表格内容在页面上。要实现该需求,我们可以借助 Luckysheet LuckyExcel 这两个开源库来实现,下面通过样例进行演示。

1,安装配置 Luckysheet

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

(2)由于 Luckysheet 现在还没有发布出模块化的开发,不能使用 npm,所以我们需要在 VUE 项目中手动引入相关文件。编辑 public/index.html 文件,在里面添加如下代码:
除了使用 CDN 方式引入外,我们也可以使用本地引入的方式,具体参考我写的另一篇文章:
<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>

(3)接着写个简单样例测试下,在页面上添加一个 div 用于表格显示区域,然后初始化 Luckysheet 创建表格:
<template>
  <div class="hello">
    <div id="mysheet" style="margin:0px;padding:0px;width:50%;height:500px;"></div>
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
  },
  mounted() {
      // 创建表格
      window.luckysheet.create({
          container: 'mysheet' // 设定DOM容器的id
      });
  },
  methods: {
  }  
}
</script>

(4)效果图如下:

2,安装配置 Luckyexcel

(1)为了让 Luckysheet 能够展示 excel 文件里的数据,我们还需要配合 Luckysheet 开发的 excel 导入导出库 LuckyexcelGitHub主页),用于将 excel 文件数据转换成 Luckysheet 可以使用的数据。
注意Luckyexcel 只能读取 .xlsx 格式数据,无法读取 .xls 格式数据。

(2)首先进入项目文件夹,执行如下命令安装 luckyexcel
npm install luckyexcel

(3)接着修改上面的样例代码,读取并转换一个 xlsx 文件数据,然后提供给 Luckysheet 进行展示:
<template>
  <div class="hello">
    <div id="mysheet" style="margin:0px;padding:0px;width:100%;height:500px;"></div>
  </div>
</template>
<script>

import LuckyExcel from 'luckyexcel'

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
  },
  mounted() {
      // 加载 excel 文件
      LuckyExcel.transformExcelToLuckyByUrl("2021.xlsx", "", (exportJson, luckysheetfile) => {
          console.log(exportJson);
          console.log(luckysheetfile);
          if(exportJson.sheets==null || exportJson.sheets.length==0){
              alert("文件读取失败!");
              return;
          }
          // 销毁原来的表格
          window.luckysheet.destroy();
          // 重新创建新表格
          window.luckysheet.create({
              container: 'mysheet', // 设定DOM容器的id
              showtoolbar: false, // 是否显示工具栏
              showinfobar: false, // 是否显示顶部信息栏
              showstatisticBar: false, // 是否显示底部计数栏
              sheetBottomConfig: false, // sheet页下方的添加行按钮和回到顶部按钮配置
              allowEdit: false, // 是否允许前台编辑
              enableAddRow: false, // 是否允许增加行
              enableAddCol: false, // 是否允许增加列
              sheetFormulaBar: false, // 是否显示公式栏
              enableAddBackTop: false,//返回头部按钮
              data:exportJson.sheets, //表格内容
              title:exportJson.info.name  //表格标题
          });
      });
  },
  methods: {
  }  
}
</script>

(4)效果图如下:
注意:如果 xlsx 文件使用的是通过 wps 创建的,并且里面的图片使用的是嵌入式的图片,那么会无法正常显示该图片,而是显示类似 =DISPIMG("图片 1(1)",1) 这样的文字。
    这是因为 WPS 表格里插入的嵌入式图片是 =DISPIMG 格式,这个图片是 wps 特有的功能,它不是 vshape,在 shapes 集合中找不到。只能用 wps et 表格打开才能看到这个图片。要解决该问题只需在 wps 右键切换为浮动图片,即可解决
评论0