luckysheet 国产超强纯前端在线excel表格功能强大简单使用记录异常报错记录及处理

开始使用这里我做了一个在vue项目中使用示例：页面使用中，新建一个元素https://www.npmjs.com/package/luckysheet在线效果https://mengshukeji.gitee.io/luckysheetdemo/在线导入效果https://mengshukeji.gitee.io/luckyexceldemo/本地离线引入下载离线包整合了一个插件文件包

成茂峰

1218人浏览 · 2022-12-06 16:08:37

成茂峰 · 2022-12-06 16:08:37 发布

效果预览

在这里插入图片描述

官网及在线示例

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

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

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

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

使用步骤

两种引入方式：

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

本地离线引入

下载离线包

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

整合了一个插件文件包

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

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

    <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>
    <script src="./static/luckysheet/luckyexcel.umd.js"></script>

开始使用

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

<div v-loading="isLoading" class="xlsx-container">
    <div
      id="luckysheet"
      style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"
    />
</div>

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


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