前端万级数据量表格预览及前端导出Excel方案、组件封装（基于vxetable虚拟滚动和web worker）_vxe-table 导出

如题，本文主要解决前端展示渲染大数据量table数据及导出Excel的问题，主要是通过使用v3版本的vxetable和webworker来实现的。亲测可以表格可渲染30w条数据，可在10s内导出30w条数据Excel。

框架：vue2；

一、安装vxetable

可参考官网：https://vxetable.cn/v3/#/table/start/use

1. 安装按需加载的插件

npm install babel-plugin-import -D
1

2. 修改文件 .babelrc 或 babel.config.js

{
        "plugins": [
          [
            "import",
            {
              "libraryName": "vxe-table",
              "style": true // 样式是否也按需加载
            }
          ]
        ]
      }
1
2
3
4
5
6
7
8
9
10
11

3. main.js中全局按需引入模块

import { VXETable, Icon, Column, Table } from 'vxe-table'
Vue.use(Icon).use(Column).use(Table).use(VXETable)
1
2

这样VXETable就已经在项目中安装注册完成，接下来进行安装vue-worker

二、安装vue-worker

1. 首先安装vue-worker插件；

npm install vue-worker -S
1

2. 在main.js中引入

import VueWorker from 'vue-worker'
Vue.use(VueWorker)
1
2

3. 引入导出XLSX的包
   这里有两种方式
   第一种方式：在web worker中使用XLSX的外部CDN链接

importScripts('https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.15.3/xlsx.core.min.js')
1

然后就可以在web worker中全局使用XLSX了

第二张方式：将上面声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/140561