Vue2.0实现将页面中表格数据导出excel的实例_网络技术

Vue2.0实现将页面中表格数据导出excel的实例

发布时间 - 2026-01-11 02:42:27 点击率：次

这两天学习了Vue.js 感觉知识点挺多的，所以，今天添加一点小笔记。

项目中将后台返回的数据v-for到表格中，然后需要将这个表格导出为EXCEL

只说怎么做。

一、需要安装三个依赖：

npm install -S file-saver xlsx
npm install -D script-loader

二、项目中新建一个文件夹：（vendor---名字任取）

里面放置两个文件Blob.js和 Export2Excel.js。

Blob.js和 Export2Excel.js文件下载地址：Export2Exce_jb51.rar

三、在.vue文件中

写这两个方法：其中list是表格的内容

　　　　export2Excel() {
　　　　　　require.ensure([], () => {
　　　　　　　　const { export_json_to_excel } = require('../../vendor/Export2Excel');
　　　　　　　　const tHeader = ['序号', 'IMSI', 'MSISDN', '证件号码', '姓名'];
　　　　　　　　const filterVal = ['ID', 'imsi', 'msisdn', 'address', 'name'];
　　　　　　　　const list = this.tableData;
　　　　　　　　const data = this.formatJson(filterVal, list);
　　　　　　　　export_json_to_excel(tHeader, data, '列表excel');
　　　　　　})
　　　　},
　　　　formatJson(filterVal, jsonData) {
　　　　　　return jsonData.map(v => filterVal.map(j => v[j]))
　　　　}

四、按钮导出调用export2Excel方法

注：如果webpack报解析错误：

在build----webpack.base.conf.js中resolve的alias加入 'vendor': path.resolve(__dirname, '../src/vendor'),

即可解决

另：alias是配置别名　

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# Vue2 # 导出excel # excel导出 # vue实现下拉框筛选表格数据 # vue3 el-table结合seamless-scroll实现表格数据滚动的思路详解 # vue elementUI table表格数据滚动懒加载的实现方法 # Vue.js+Layer表格数据绑定与实现更新的实例 # vue3使用el-radio-group获取表格数据无法选中问题及解决方法 # 下载地址 # 这两个 # 怎么做 # 这两天 # 只说 # 大家多多 # 新建一个 # 挺多 # Blob # vendor # xlsx # script # loader # rar # vue # npm # Export2Excel # strong # pre # class

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：深圳网络优化如何快速提升企业搜索排名？

下一篇：Linux CPU系统资源占用过高问题解析

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：深圳网络优化如何快速提升企业搜索排名？

下一篇：Linux CPU系统资源占用过高问题解析