excel文件预览: luckyexcel+luckysheet

luckyexcel 使用

npm i luckyexcel --save
1

luckysheet 使用 luckysheet文档

1. 克隆Luckysheet源码到本地

git clone https://github.com/dream-num/Luckysheet.git
1

2. 安装依赖

npm install
npm install gulp -g  
1
2

3. 开发

npm run dev
1

4. 打包

npm run build
1

本地引入
npm run build 后 dist 文件夹下的所有文件复制到vue项目的public目录下，然后在index.html文件中通过相对路径引入：

<link rel='stylesheet' href='./plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='./plugins/plugins.css' />
<link rel='stylesheet' href='./css/luckysheet.css' />
<link rel='stylesheet' href='./assets/iconfont/iconfont.css' />
<script src="./plugins/js/plugin.js">script>
<script src="./luckysheet.umd.js">script>
1
2
3
4
5
6

表格容器

<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;">div>
1

1.预览本地文件/后端返回文件流文件

      // 获取文件流
      const token = '用户token'
      axios.get('你的接口地址', {
        headers: { 'Token': token },
        responseType: 'blob',
        params: {
          // 参数
        }
      }).then((response) => {
        // 将获取到的文件对象传递给 uploadExcel 方法
        const file = new File([response.data], 'XXX.xlsx', { type: response.data.type });
      })
      .catch((error) => {
        console.error('文件获取失败：', error);
      })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

import LuckyExcel from 'luckyexcel'

LuckyExcel.transformExcelToLucky(file, (exportJson, luckysheetfile) => {
   if(exportJson.sheets==null || exportJson.sheets.length==0){
       console.log("文件读取失败!");
       return;
   }
   // 销毁原来的表格
   luckysheet.destroy();
   // 重新创建新表格
   exportJson.sheets[0].defaultRowHeight = 25  // 行高
   luckysheet.create({
      container: 'luckysheet', // 设定DOM容器的id
      column: 15,
      row: 30,
      showtoolbar: false, // 是否显示工具栏
      showinfobar: false, // 是否显示顶部信息栏
      showsheetbarConfig:{
          add: false,
          menu: false,
      },
      sheetRightClickConfig: {
          delete: false, // 删除
          copy: false, // 复制
          rename: false, //重命名
          color: false, //更改颜色
          hide: false, //隐藏，取消隐藏
          move: false, //向左移，向右移
       },
       //自定义单元格右键菜单
       cellRightClickConfig: {
          copy: false, // 复制
          copyAs: false, // 复制为
          paste: false, // 粘贴
          insertRow: false, // 插入行
          insertColumn: false, // 插入列
          deleteRow: false, // 删除选中行
          deleteColumn: false, // 删除选中列
          deleteCell: false, // 删除单元格
          hideRow: false, // 隐藏选中行和显示选中行
          hideColumn: false, // 隐藏选中列和显示选中列
          rowHeight: false, // 行高
          columnWidth: false, // 列宽
          clear: false, // 清除内容
          matrix: false, // 矩阵操作选区
          sort: false, // 排序选区
          filter: false, // 筛选选区
          chart: false, // 图表生成
          image: false, // 插入图片
          link: false, // 插入链接
          data: false, // 数据验证
          cellFormat: false // 设置单元格格式
       },
       showstatisticBar: false, // 是否显示底部计数栏
       sheetBottomConfig: false, // sheet页下方的添加行按钮和回到顶部按钮配置
       allowEdit: false, // 是否允许前台编辑
       enableAddRow: false, // 是否允许增加行
       enableAddCol: false, // 是否允许增加列
       sheetFormulaBar: false, // 是否显示公式栏
       enableAddBackTop: false, //返回头部按钮
       data: exportJson.sheets, //表格内容
       title: exportJson.info.name, //表格标题
    });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

2.excel文件地址

LuckyExcel.transformExcelToLuckyByUrl(excelUrl, excelName, (exportJson, luckysheetfile) => {})
1