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

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

框架：vue2；

一、安装vxetable

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

安装按需加载的插件

npm install babel-plugin-import -D

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

{"plugins": [["import",{"libraryName": "vxe-table","style": true // 样式是否也按需加载}]]}

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

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

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

二、安装vue-worker

首先安装vue-worker插件；

npm install vue-worker -S

在main.js中引入

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

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

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

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

第二张方式：将上面

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

每年节省170万美元的文档预览费用，借助机器学习的DropBox有多强？
[CSDN 编者按]Dropbox 借助机器学习的预测功能,每年能为公司节省了一百多七十多万美元的基础架构成本.非常了不起的成就.本文,一起来看一看 Dropbox 采用机器学习的经过,以及分析一下其 ...
前端vue利用flexpaper实现在线预览
前端vue利用flexpaper实现在线预览下载flexpaper 只需要用到js文件和FlexPaperViewer.swf: flexpaper_flash_debug.js flexpaper ...
js读excel到网页表格预览
xlsx.js读取xls,xlsx文件到网页表格预览(bootstrap table) 以下描述仅展示主要功能,具体代码实现在gtihub上,链接在文章最后. 1.js准备读取文件的xlsx.js+ ...
Android播放视频快进帧预览图完美解決方案
播放视频快进预览图完美解決方案,使用方法如下,使用FFmpeg,不影响原有播放器, 就是先截取缩略图保存下来,快进时选用图片显示,最优方案,播放性能最好,体验完美. 参考github: https:/ ...
anguarjs 上传图片预览_前端图片上传那些事儿
本文转自:掘金作者:chess 前言本文讲的图片上传,主要是针对上传头像的.大家都知道,上传头像一般都会分成以下 4 个步骤: 选择图片 -> 预览图片 -> 裁剪图片 -> 上 ...
前端技术实现文件预览（word、excel、pdf、ppt、mp4、图片、文本）
前言因为业务需要,很多文件需要在前端实现预览,今天就来了解一下吧. Demo地址[1]:https://zhuye1993.github.io/file-view/dist/index.html 实 ...
前端页面预览word_前端实现在线预览文档
前端实现在线预览文档发布时间:2019-06-03 17:22, 浏览次数:529 <>前端实现在线预览文档最近项目开发中需要实现在线预览Word,Excel,PowerPoint格式 ...
用Gitee Pages服务在线预览vue3前端项目:静态网站+多级路由+history模式(踩坑)
目录目标与前提 vue打包.预览遇到的坑以及原因坑①:静态网站打开一片空白坑②:子路由刷新或直接输入时,网页一片空白或404 坑③:首页加载时间过长坑④:线上预览地址出错时,不显示404页面 ...
java word转pdf linux_java实现word转pdf在线预览（前端使用PDF.js；后端使用openoffice、aspose）...
背景之前一直是用户点击下载word文件到本地,然后使用office或者wps打开.需求优化,要实现可以直接在线预览,无需下载到本地然后再打开. 随后开始上网找资料,网上资料一大堆,方案也各有不同,大 ...

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

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

一、安装vxetable

二、安装vue-worker

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

最新文章

热门文章