Vue中使用luckyexcel插件开发在线表格编辑_excel在线编辑开发

最近项目需求要做一个在线编辑xlsx功能，在此使用了luckyexcel组件来进行开发：vue中使用总结如下
1、首先进行引入：注意，引入这块需要进行线上引入，使用npm 安装会出如下错误：

vue页面中使用：

<template>
  <div class="excelContent">
    <div class="header">
      <!-- 本地导入 -->
      <upload :file-list="fileList" :before-upload="beforeUpload" accept=".xlsx,.xls,.excel">
        <a-button> 点击导入 </a-button>
      </upload>
      <a-button style="margin-left: 20px" @click="getData">请求数据</a-button>
      <a-button style="margin-left: 20px" @click="downloadExcel">点击导出</a-button>
    </div>

    <!-- luckysheet容器 -->
    <div
      id="luckysheet"
      style="margin: 0px; padding: 0px; 
      position: absolute; width: 96%; 
      left: 72px; top: 29px; bottom: 0px; 
      z-index: 0"
    ></div>
  </div>
</template>

<script>
//import LuckyExcel from 'luckyexcel' 错误引入
import { exportExcel } from '@/utils/export'

export default {
  name: 'Excel',
  data () {
    return {
      fileList: [],
      name: '导出的表格',
      options: {
        container: 'luckysheet',
        title: '测试Excel', // 表 头名
        lang: 'zh', // 中文
        showtoolbar: true, // 是否显示工具栏
        showinfobar: false, // 是否显示顶部信息栏
        showsheetbar: true // 是否显示底部sheet按钮
      }
    }
  },
  mounted () {
    window.luckysheet.create(this.options)
  },
  methods: {
    // 导出到本地
    downloadExcel () {
      exportExcel(window.luckysheet.getAllSheets(), this.name)
    },
    // 导入数据
    beforeUpload (files) {
      console.log(files)
      if (files === null || files.length === 0) {
        // alert('No files wait for import')
        this.$message.error('文件为空', 2.5)
        return
      }
      const name = files.name
      const suffixArr = name.split('.')
      this.name = suffixArr[0]
      const suffix = suffixArr[suffixArr.length - 1]
      if (suffix !== 'xlsx') {
        this.$message.error('请传入后缀为 xlsx 的文件', 2.5)
        return
      }
      LuckyExcel.transformExcelToLucky(files, (exportJson, luckysheetfile) => {
        if (exportJson.sheets === null || exportJson.sheets.length === 0) {
          this.$message.error('无法读取excel文件的内容，当前不支持xls文件！')
          return
        }
        window.luckysheet.destroy()
        this.options.data = exportJson.sheets
        console.log('数据', this.options.data)
        window.luckysheet.create(this.options)
      })
    },
    getData () {
      const data = [
        {
          name: 'cell',
          color: '',
          index: 1,
          status: 0,
          order: 1,
          celldata: [
            {
              r: 0, // 行
              c: 0, // 列
              v: '姓名' // 值
            },
             {
              r: 1, // 行
              c: 0, // 列
              v: '张三' // 值
            },
             {
              r: 2, // 行
              c: 0, // 列
              v: '李四' // 值
            },
             {
              r: 3, // 行
              c: 0, // 列
              v: '王五' // 值
            },
            {
              r: 0,
              c: 1,
              v: '年龄'
            },
              {
              r: 1,
              c: 1,
              v: '1'
            },
              {
              r: 2,
              c: 1,
              v: '2'
            },
              {
              r: 3,
              c: 1,
              v: '3'
            }
          ],
          config: {}
        },
        {
          name: 'Sheet2',
          color: '',
          index: 1,
          status: 0,
          order: 1,
          celldata: [],
          config: {}
        },
        {
          name: 'Sheet3',
          color: '',
          index: 2,
          status: 0,
          order: 2,
          celldata: [],
          config: {}
        }
      ]
      window.luckysheet.destroy()
      this.options.data = data
      window.luckysheet.create(this.options)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
* {
  margin: 0;
  padding: 0;
}
.header {
  display: flex;
  margin-bottom: 20px;
  background: #f7f7f7;
  height: 30px;
  line-height: 30px;
  margin-left: 2px;
}
.printHideCss {
  visibility: hidden !important;
}
.excelContent {
  width: 100%;
}
</style>

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178

Luckysheet现在还没有发布出模块化的开发，不能使用npm，要使用如下csdn引用方式：

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/plugins.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/css/luckysheet.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/assets/iconfont/iconfont.css' />
<script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/luckysheet.umd.js"></script>

1
2
3
4
5
6
7

如下图，成功