在vue项目实现预览excel

首先安装依赖

cnpm i lukysheet

cnpm i luckyexcel

！！！lukysheet需要在public=》index.html进行手动引入

在node-module把lukysheet包找出来，然后把里面的dict文件夹copy到public里面

这里自己改了文件名

然后引入

<link rel='stylesheet' href='luckysheet/plugins/css/pluginsCss.css' />

    <link rel='stylesheet' href='luckysheet/plugins/plugins.css' />

    <link rel='stylesheet' href='luckysheet/css/luckysheet.css' />

    <link rel='stylesheet' href='luckysheet/assets/iconfont/iconfont.css' />

    <script src="luckysheet/plugins/js/plugin.js"></script>

    <script src="luckysheet/luckysheet.umd.js"></script>

就引入成功了

然后在vue里使用

import LuckyExcel from 'luckyexcel'

import luckysheet from 'luckysheet' 

 引入

调用接口拿取数据 ，EXPORTBTNPOST是我自己封装好的，返回的是blob

async getDetail(row) {

      console.log(row)

      this.dialogVisible = true

      try {

        const res = await EXPORTBTNPOST('/government/export/exportRegister?projectId=1&&status=2')

        console.log(res)

        // 二进制流（blob）转file对象

        // const files = new window.File([res], '成绩详情.xlsx', { type: 'application/vnd.ms-excel;charset=utf-8' })

        // console.log(files)

        LuckyExcel.transformExcelToLucky(res.data, exportJson => {

          console.log(exportJson)

          if (!exportJson.sheets || exportJson.sheets.length === 0) {

            this.$message.warning('读取excel文件内容失败')

            return

          }

          this.initExcel(exportJson)

        })

      } catch (e) {

        console.log(e)

      }

    },

initExcel方法就是正题了，将数据渲染出来

 

initExcel(exportJson) {

      const name = '成绩详情'

      // eslint-disable-next-line

      luckysheet.destroy()

      // eslint-disable-next-line

      luckysheet.create({

        container: 'luckysheet', // luckysheet为容器id

        lang: 'zh', // 默认语言

        title: name,

        data: exportJson.sheets // 导入excel数据

      })

    },

差点忘了，然后就是template里面创建渲染容器，，style里面可以设置容器基础样式尺寸等等

      <div id="luckysheet" style="margin:0px auto;padding:0px;width:99vw;height:93vh;" />