效果预览

官网及在线示例

https://mengshukeji.gitee.io/LuckysheetDocs/zh/guide/

npm地址
https://www.npmjs.com/package/luckysheet

在线效果
https://mengshukeji.gitee.io/luckysheetdemo/

在线导入效果
https://mengshukeji.gitee.io/luckyexceldemo/

使用步骤

两种引入方式：

1. CDN

2. 本地离线引入

下载离线包

官方找不到release 包
这里我选择下载克隆项目，运行npm run release打了一个release包

整合了一个插件文件包

https://download.csdn.net/download/u012551928/87248392

在index.html 引入对应路径下的文件

开始使用

这里我做了一个在vue项目中使用示例：
页面使用中，新建一个元素

对应的js使用方法, 加载文件后台返回的blob文件流

data() {return {options: {container: 'luckysheet',lang: 'zh',showtoolbar: false,showinfobar: false},isLoading: true}},mounted() {setTimeout(() => {this.init()})},methods: {async init() {this.isLoading = truerequest({url: ``, // 请求xlsx文件路径method: 'get',responseType: 'blob'}).then(res => {// eslint-disable-next-lineLuckyExcel.transformExcelToLucky(res.data, (exportJson) => {if (exportJson.sheets === null || exportJson.sheets.length === 0) {this.$message.error('无法读取excel文件的内容，当前不支持xls文件！')return}// eslint-disable-next-lineluckysheet.destroy()this.options.data = exportJson.sheetsthis.$nextTick(() => {// eslint-disable-next-lineluckysheet.create(this.options)this.isLoading = false})})})}}

完成如上即可实现！！！

如果觉得有用欢迎点赞关注
有问题私信我！！~~