基于Vue的Excel文件预览（使用LuckyExcel、LuckySheet实现）

基于这种情况将excel文件展示在网页上，只提供预览功能。使用Luckyexcel方法将excel文件转换成Luckysheet需要的数据格式。使用Luckysheet将上述数据渲染到页面上。//如果处理的数据量较大，可以使用Luckysheet配置参数中的loadUrl和loadSheetUrl来分Sheet页加载。

SS上善

9973人浏览 · 2023-07-25 15:24:30

SS上善 · 2023-07-25 15:24:30 发布

1、首先需要一个页面，用于excel的预览展示。

2、编写Excel解析渲染函数：openExcel(url链接，文件名)。

3、最后在create函数里编写从某页面跳转此页面之后的渲染逻辑。

4、如果处理的数据量较大，可以使用Luckysheet配置参数中的loadUrl和loadSheetUrl来分Sheet页加载。

excel文件位于文件资源服务器上，可以直接访问excel文件链接获取文件。基于这种情况将excel文件展示在网页上，只提供预览功能。

一、介绍

Luckysheet：一款开源的、纯前端的、类似excel的在线表格。可以藉此实现在线excel预览、编辑、导入导出及其他各种excel表格相关操作。

Luckyexcel，Luckysheet的一款适配插件的excel导入导出库，只支持.xlsx格式文件（不支持.xls）。

二、基本思路

1、使用LuckyExcel的transformExcelToLuckyByUrl=function (url, name, callBack) 方法将excel文件转换成LuckySheet需要的数据格式。

2、使用LuckySheet将上述数据渲染到页面上。

三、安装

Luckyexcel

npm下载：npm install luckyexcel --save

Luckysheet

在/publiic/index.html文件里引入即可（可以本地引入，也可以CDN引入）。

CDN引入：

<link rel='stylesheet' href='./static/luckysheet/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='./static/luckysheet/plugins/plugins.css' />
<link rel='stylesheet' href='./static/luckysheet/css/luckysheet.css' />
<link rel='stylesheet' href='./static/luckysheet/assets/iconfont/iconfont.css' />
<script src="./static/luckysheet/plugins/js/plugin.js"></script>
<script src="./static/luckysheet/luckysheet.umd.js"></script>

本地引入：

npm下载luckysheet，然后将包内plugins、css、fonts、assets文件夹及luckysheet.umd.js放入public下的某目录，然后引入对应文件。

参考如下(/public/static/luckysheet)。

<link rel='stylesheet' href='./static/luckysheet/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='./static/luckysheet/plugins/plugins.css' />
<link rel='stylesheet' href='./static/luckysheet/css/luckysheet.css' />
<link rel='stylesheet' href='./static/luckysheet/assets/iconfont/iconfont.css' />
<script src="./static/luckysheet/plugins/js/plugin.js"></script>
<script src="./static/luckysheet/luckysheet.umd.js"></script>

四、具体实现：

1、首先需要一个页面，用于excel的预览展示。

页面中需要一个固定id的容器，用于承接Luckysheet的渲染，这里命名id为“luckysheet”。此外，容器需要设置好样式，尤其宽高。

<template>
  <div>
	<div id="luckysheet" :style="{ margin: '0px',padding:'0px',width:'100%',height: '800px' }"/>
  </div>
</template>

2、编写Excel解析渲染函数：openExcel(url链接，文件名)。

-- 使用LuckyExcel.transformExcelToLuckyByUrl(url, name,(exportJson, luckysheetfile) => {回调函数}）。其中exportJson是Luckyexcel解析好的Excel文件数据，其中部分字段如下：

{
	"info": {
		"appversion": "14.0300 ",
		"company": "",
		"createdTime": "2020-11-10T02:35:00Z",
		"creator": "Apache POI",
		"lastmodifiedby": "SSRS",
		"modifiedTime": "2023-07-11T02:54:58Z",
		"name": null
	},
	"sheets": [{ --sheet表集合
		"celldata": [{ --每个单元格数的数据
			"c": 0, 
			"r": 0, 
			"v": {
				"bg": "#FFFFFF",
				"bl": 1,
				"ct": {
					"fa": "General",
					"t": "s"
				},
				"ff": "微软雅黑",
				"fs": 18,
				"ht": 0,
				"qp": 1,
				"tb": 2,
				"v": "单元格内容",
				"vt": 0
			}
		}],
		"config": {}, --当前sheet表的配置格式
		"index": "3", --sheet表的index
		"name": "XXXXXX", --sheet表名
		"order": "0", --sheet表的次序
		"showGridLines": "1", 
		"status": "1" --sheet表显示状态，哪个显示哪个是1
	}]
}

-- 使用window.luckysheet.create(options)函数预览excel表格。options参考如下：

整体配置 | Luckysheet文档

-- 其中在回调函数里将exportJson的sheets数据赋给options.data即可

const openExcel = ({url:url,name:name}) => {
  nextTick(() => {
    LuckyExcel.transformExcelToLuckyByUrl(url, name,(exportJson, luckysheetfile) => {
      if (exportJson.sheets == null || exportJson.sheets.length === 0) {
        alert("Fail to read the content of the excel file")
        return;
      }
      console.log('exportJson',exportJson)

      // luckysheet生成网页excel
      window.luckysheet.destroy()
      window.luckysheet.create({
        container: 'luckysheet', // 设定DOM容器的id
        showtoolbar: false, // 是否显示工具栏
        showinfobar: false, // 是否显示顶部信息栏
        showsheetbarConfig: {
          add: false, //新增sheet
          menu: true, //sheet管理菜单
          sheet: true //sheet页显示
        },
        sheetRightClickConfig: {
          delete: false, // 删除
          copy: false, // 复制
          rename: false, //重命名
          color: false, //更改颜色
          hide: false, //隐藏，取消隐藏
          move: false, //向左移，向右移
        },
        showstatisticBar: false, // 是否显示底部计数栏
        sheetBottomConfig: false, // sheet页下方的添加行按钮和回到顶部按钮配置
        allowEdit: false, // 是否允许前台编辑
        enableAddRow: false, // 是否允许增加行
        enableAddCol: false, // 是否允许增加列
        sheetFormulaBar: false, // 是否显示公式栏
        enableAddBackTop: false, //返回头部按钮
        data: exportJson.sheets, //表格内容
        title: exportJson.info.name, //表格标题
      });
    })
  })
};

3、最后在create函数里编写从某页面跳转此页面之后的渲染逻辑。

created() {
  // 上一个页面采用router.push({name: "ExcelShow", query: {url: url,name: name}}) 方式跳转传参
  // 获取参数： excel文件链接url及其名称name
  const fileUrl= this.$route.query.url ? this.$route.query.url : null
  const fileName= this.$route.query.name ? this.$route.query.name : null
  if (fileUrl == null) {
    alert("error")
  } else {
    // 加载文件内容
    this.openExcel({url:fileUrl,name:fileName})
  }

},

4、如果处理的数据量较大，可以使用Luckysheet配置参数中的loadUrl和loadSheetUrl来分Sheet页加载。

loadUrl先加载默认sheet表的数据和所有sheet表的基本配置信息，随后切换到其它页的时候再请求loadSheetUrl将其数据补全。两个参数均为接口地址，使用post请求。具体数据格式见文档。

由于excel文件是本身存在的，没有用后端生成，如果再使用后端构建数据集的话不太方便，所以我采用Luckyexcel加载文件所有数据，然后拆分exportJson，构建成两个数据集firstData和secondData。firstData是loadUrl配置的接口应该返回数据，secondData是loadSheetUrl配置的接口应该返回的数据。

const firstData = [];
const secondData = {};
for (let i = 0; i < exportJson.sheets.length; i++) {
  firstData[i] = {
    name: exportJson.sheets[i].name,
    index: exportJson.sheets[i].index,
    order: exportJson.sheets[i].order,
    status: exportJson.sheets[i].status,
    config: exportJson.sheets[i].config
  }
  firstData[i].config.row = 10
  parseInt(exportJson.sheets[i].status) === 1 ? firstData[i].celldata = exportJson.sheets[i].celldata : 0 == 0
  secondData[exportJson.sheets[i].index] = exportJson.sheets[i].celldata
}

然后，修改Luckysheet的源码，全局搜索，将所有对应$.post(loadurl, {"gridKey" : server.gridKey}, function (d) {里面的内容})和$.post(loadSheetUrl, {"gridKey" : server.gridKey, "index": sheetindex.join(",")}, function (d) {里面的内容})的post请求外皮注释掉，只留下post请求里面的回调函数function (d)里面的内容，并将里面的内容中的原参数d改为loadurl或loadSheetUrl。

最后编译打包，将生成的文件替换掉在安装步骤“引入luckysheet”时引入的文件。

此时，在原项目中注释掉options配置的data，将JSON.stringify(firstData)赋给loadUrl，JSON.stringify(secondData)赋给loadSheetUrl即可。

最终代码如下：

<template>
  <div>
    <a-page-header title="Title" sub-title="This is a subtitle" @back="() => $router.go(-1)">
      <template #extra>
        <a-button @click="() => this.$router.back()">返回</a-button>
        <a-button v-if="!state.err" type="primary" @click="downfile({url: state.fileUrl,name: state.fileName})">保存</a-button>
      </template>
    </a-page-header>
    <a-card :bordered="false" :style="{ background: '#fff', minHeight: '280px' }">
      <div id="luckysheet" :style="{ margin: '0px',padding:'0px',width:'100%',height: totalHeight+'px' }"/>
    </a-card>
  </div>
</template>
<script>
import LuckyExcel from 'luckyexcel';
import {defineComponent, nextTick} from "vue";
import {reactive} from "vue";

export default defineComponent({
  created() {
    const fileUrl= this.$route.query.url ? this.$route.query.url : null
    const fileName= this.$route.query.name ? this.$route.query.name : null
    this.state.fileUrl = fileUrl
    this.state.fileName = fileName
    if (fileUrl == null) {
      alert("error")
    } else {
      // 加载文件内容
      this.openExcel({url:fileUrl,name:fileName})
    }

  },
  setup() {
    const state = reactive({
      fileUrl: '',
      fileName: ''
    });
    const totalHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    const openExcel = ({url:url,name:name}) => {
      nextTick(() => {
        LuckyExcel.transformExcelToLuckyByUrl(url, name,(exportJson, luckysheetfile) => {
          if (exportJson.sheets == null || exportJson.sheets.length === 0) {
            alert("Fail to read the content of the excel file")
            return;
          }
          // /public/statis/luckysheet文件夹下 是被修改的luckysheet源码
          // loadUrl、loadSheetUrl不再使用post接口请求，而是直接传递现成数据加载（数据格式与原post返回格式一致）
          // 构建loadUrl: firstData(包括所有sheet表的格式，和第一个sheet的数据)
          // loadSheetUrl:secondData (包括除第一个sheet表的其他所有表的数据)

          const firstData = [];
          const secondData = {};
          for (let i = 0; i < exportJson.sheets.length; i++) {
            firstData[i] = {
              name: exportJson.sheets[i].name,
              index: exportJson.sheets[i].index,
              order: exportJson.sheets[i].order,
              status: exportJson.sheets[i].status,
              config: exportJson.sheets[i].config
            }
            firstData[i].config.row = 10
            parseInt(exportJson.sheets[i].status) === 1 ? firstData[i].celldata = exportJson.sheets[i].celldata : 0 == 0
            secondData[exportJson.sheets[i].index] = exportJson.sheets[i].celldata
          }

          console.log('exportJson',exportJson)

          // luckysheet生成网页excel
          window.luckysheet.destroy()
          window.luckysheet.create({
            container: 'luckysheet', // 设定DOM容器的id
            showtoolbar: false, // 是否显示工具栏
            showinfobar: false, // 是否显示顶部信息栏
            showsheetbarConfig: {
              add: false, //新增sheet
              menu: true, //sheet管理菜单
              sheet: true //sheet页显示
            },
            sheetRightClickConfig: {
              delete: false, // 删除
              copy: false, // 复制
              rename: false, //重命名
              color: false, //更改颜色
              hide: false, //隐藏，取消隐藏
              move: false, //向左移，向右移
            },
            showstatisticBar: false, // 是否显示底部计数栏
            sheetBottomConfig: false, // sheet页下方的添加行按钮和回到顶部按钮配置
            allowEdit: false, // 是否允许前台编辑
            enableAddRow: false, // 是否允许增加行
            enableAddCol: false, // 是否允许增加列
            sheetFormulaBar: false, // 是否显示公式栏
            enableAddBackTop: false, //返回头部按钮
            // data: [exportJson.sheets[0]], //表格内容
            gridKey: url,
            loadUrl: JSON.stringify(firstData), //首先加载的数据，被修改后需要String类型
            loadSheetUrl: JSON.stringify(secondData), //随后加载的数据，被修改后需要String类型
            title: exportJson.info.name, //表格标题
          });
        })
      })
    };
    return {
      totalHeight,
      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
      state,
      openExcel
    }
  }
})

</script>