luckysheet 國産超強純前端線上excel表格功能強大 簡單使用記錄

效果預覽

官網及線上示例

npm位址

https://www.npmjs.com/package/luckysheet

線上效果

https://mengshukeji.gitee.io/luckysheetdemo/

線上導入效果

https://mengshukeji.gitee.io/luckyexceldemo/

使用步驟

兩種引入方式：

1. CDN

<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>           

2. 本地離線引入

下載下傳離線包

> 官方找不到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
          })
        })
      })
    }
  }           

完成如上即可實作！！！

如果覺得有用歡迎點贊關注

有問題私信我！！~~