Luckysheet 在vue中离线使用及引入报错的解决方案(推荐)

Luckysheet 是一个基于web的在线电子表格应用，支持多人协同编辑、数据可视化、大数据量渲染等功能。本文将详细介绍如何在vue项目中离线使用Luckysheet，并解决可能遇到的引入报错的问题。

1. 安装Luckysheet

首先需要在vue项目中安装Luckysheet。可以通过npm来安装，命令如下：

npm install luckysheet

2. 引入Luckysheet

在vue项目的入口文件main.js中引入Luckysheet，代码如下：

import Luckysheet from 'luckysheet';

Vue.use(Luckysheet);

3. 离线使用Luckysheet

由于Luckysheet是一个基于web的在线电子表格应用，在线使用存在受网络状态影响的问题。为了解决这个问题，我们可以将Luckysheet下载下来，配置到vue项目中，实现离线使用。

3.1. 配置webpack

在vue项目的webpack配置文件中，添加以下代码进行Luckysheet的loader配置：

{
    test: /\.worker\.js$/,
    use: {
        loader: 'worker-loader'
    }
},
{
    test: /luckysheet.umd.js$/,
    use: [{
        loader: 'file-loader',
        options: {
            name: '[name].[ext]'
        }
    }]
}

3.2. 下载Luckysheet源码

从Luckysheet项目的github地址中，下载最新的源码压缩包（https://github.com/mengshukeji/Luckysheet/archive/master.zip），并将压缩包解压缩到vue项目的static目录下。

3.3. 在组件中引入Luckysheet

可以在.vue组件中使用Luckysheet，代码如下：

<template>
  <div id="luckysheet"></div>
</template>

<script>
import workerJs from 'file-loader!../../../static/Luckysheet-1.1.0/js/luckysheet.all.js';
import worker from 'worker-loader!../../../static/Luckysheet-1.1.0/js/plugins/plugin.js';

export default {
  name: 'LuckysheetDemo',
  mounted() {
    window.luckysheet.create({
      container: 'luckysheet',
      plugins: [{ plugin: 'chartMix', main: 'luckysheet.plugins.chartMix' }],
      showinfobar: false,
      userInfo: false,
      functionMousedown() {},
      pluginsOptional: { chartMix: true },
      functionMouseUp() {},
      luckysheetcreated() {},
      pluginsData: {},
      fireMousedown: true,
      lang: 'zh',
      enableAddRow: true,
      enableAddBackTop: true,
      enableRename: true,
      enableAutoFormat: true,
      enablePaste: true,
      enableFullScreen: false,
      enableStyles: true,
      data: []
    });
  },
  beforeDestroy() {
    this.luckysheet && this.luckysheet.destroy && this.luckysheet.destroy();
  },
  data() {
    return {
      luckysheet
    };
  },
  components: {}
};
</script>

这里需要注意：

• 引入luckysheet.all.js的时候需要使用file-loader来解析，保证文件以原名存储。
• 引入插件的时候需要指定插件的名称和位置，这里的示例插件是chartMix，插件路径为luckysheet.plugins.chartMix。
• 注入worker.js文件，这个文件在webpack的配置中会被转化为一个线程。线程中运行着Luckysheet的大量计算，包括公式计算、渲染等等，将这部分内容放在一个线程中会分担主线程大量计算的压力，避免卡顿等问题。

4. 引入报错的解决方案

在以上步骤配置后，可能出现以下错误提示：

Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at ‘.../plugins/plugin.js?v=1.0’ loaded by’something/index.js' was blocked because of a disallowed MIME type (“text/html”)

这个问题表示线程中引入了一个无效的脚本，被限制了。解决方案是在配置webpack的时候，添加以下代码：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(js)$/,
        exclude: [
          /node_modules/
        ],
        include: [
          path.join(__dirname, '/src')
        ],
        loader: 'babel-loader',
        options: {
          presets: [['@babel/preset-env', { modules: false }]],
        }
      },
      {
        test: /\.worker\.js$/,
        use: {
          loader: 'worker-loader',
          options: {
            inline: true,
            fallback: false
          }
        }
      }
    ]
  }
}

需要注意的是：

• worker-loader需要将文件inline到主文件里，以防止错误的读取文件。
• worker-loader需要设置fallback: false，以避免交替分享worker的处理。

以上就是完整的在vue项目中离线使用Luckysheet，并解决引入报错的攻略，希望能对大家有所帮助。

示例1：

在.vue组件的mounted方法中，声明一下window.luckysheet.create方法即可初始化Luckysheet表格。

示例2：

引入worker.js文件，这个文件在webpack的配置中会被转化为一个线程。线程中运行着Luckysheet的大量计算，包括公式计算、渲染等等，将这部分内容放在一个线程中会分担主线程大量计算的压力，避免卡顿等问题。