vue.js导出excel,vue导出表格的两种方法
在开发后台管理系统时，很多地方需要导出excel表格，比如将表格中的数据导出到本地。本文主要介绍Excel导出到Vue的功能的相关信息，有需要的朋友可以参考一下。
:
目录
1.前端领先流程：
2.插件的使用和初始化
2.1借助vue-admin中提供的方法。2.2安装插件依赖项。2.3回调函数的内容如下：3 .处理后台数据达到想要的效果3.1准备一个数据处理函数(最后会用到回调)3.2先处理表头，定义一个对象，目的是后面把表头的英文转换成中文。3.3定义标题。3.4处理后台返回数据。3.5表头处理逻辑3.6表格数据处理逻辑3.7函数返回3.8最终汇总：
1.前端主导流程：
1.单击页面中的导出按钮(注册单击事件)
2.在事件回调中，发送请求的后台数据。
3.处理背景数据，以达到预期的效果。
4.生成Excel文件
2. 插件使用及初始化
2.1 借助vue-admin中提供的方法。
将插件包复制并粘贴到您自己项目下的src文件夹中。
2.2 安装插件依赖。
注：报告错误的概率很高。这个阶段出了什么问题，基本就看不装了。就装吧。
npm安装文件-保存程序脚本-加载程序-保存
2.3 回调函数内容如下
当我们正式点击“导出”按钮时，我们将在供应商文件夹中加载Export2Excel模块。
当我们正式点击“导出”按钮时，我们将在供应商文件夹中加载Export2Excel模块。
导入(“@/vendor/Export2Excel”)。然后(excel={
//excel表示//导入的模块对象。//执行导入方法时，返回一个promise对象。
//在then方法中，我们可以得到使用的模块对象。
console.log(excel)
excel.export_json_to_excel({
表头：[姓名，薪资]，//表头必输
数据：[
[刘备，100]，//重点放在数据的配置部分。我们发现它需要一个严格的二维数组。
[关羽，500]
]，//需要具体数据
文件名： excel-list ，//文件名
AutoWidth: true，//宽度是否自适应？
BookType: xlsx //生成的文件类型
})
})
Excel导出参数描述
注：到目前为止，其实已经完成了简单的导出效果，用的是自己写的假数据。在实际项目中，必须是后台返回的数据，要修改格式才能达到想要的效果(真实测试后，以上步骤即可完成。)效果如下：
3.对后台数据进行处理，完成想要的效果
比如后台返回的头是英文，需要转换成中文，然后格式不是插件要求的格式。
后端数据：
您需要将密钥转换成中文，并将值更改为数组。
3.1 准备一个数据处理函数（最后会在回调里面使用）
3.2 先处理表头，定义一个对象，目的是待会将表头的英文转成中文
常数映射={
Id :数字，
密码:密码，
手机:手机号码，
用户名:姓名，
TimeOfEntry :雇佣日期，
“就业表格”:“就业表格”，
更正时间:确认日期，
工作编号:工作编号，
部门名称:部门，
StaffPhoto :头像地址
}
3.3 定义表头
header=[英文头后面会转换成中文，是数组的形式]
以下代码显示了这种效果：
header=[id ，手机，用户名，……]
3.4 要处理后台返回数据
返回背景数组，定义一个作为第一个数据，目的是用第一个数据作为样本设置表头。如果第一个数据是假的，说明后台还没有返回任何东西，这出戏就结束了。
以下代码显示了这种效果：
const one=list[0]
如果(！一){
返回{ header，data }
}
3.5 表头处理逻辑
01 object . keys(one)这是遍历对象，取出键组成数组。
02 ` map方法通过对每个项目执行操作进行迭代，并返回一个数组。
03 `返回map[key] ]`可视为map.id= number (通俗易懂)；map方法不断对map对象做事情，map[key]实际上是一个值，比如 number 和 department ……然后形成一个数组，比如[name 和 salary]
header=Object.keys(一个)。地图(key={
返回地图[键]
})
3.6 表格data处理逻辑
目标：回到背景，正式员工和非正式员工分别用1和2表示。我们需要将数字转换成单词，并且需要将它们格式化成数组。
01-首先，后台返回的obj [正式就业]是数字1，2。我们希望它们变得“正式”、“非正式”
02-obj[ formofemployment ]=hiretypenmu[key]这个代码的意思是将汉字设置到左边的数字上，实现替换。我们来看看左和右分别代表什么。
03- obj[formOfEmployment]此时是一个数字。
04-hireTypEnmu:{1:正式， 2 :非正式 }这是我们自己定义的对象。
05-hireTypEnmu[key]-key-key是一个数字——所以他是一个值或者一个汉字。
以下代码显示了这种效果：
//data将列表中的每个对象转换成相应的值数组。
//hireTypEnmu:{1:正式， 2 :非正式 }
data=list.map(obj={
//Put obj [正式雇佣]: 1，2-正式，非正式
const key=obj[ formOfEmployment ]//1，2
obj[ formOfEmployment ]=hireTypEnmu[key]
返回对象值(obj)
})
3.7 函数返回
返回处理后的数据。
返回{ header，data }
3.8 最终完成
这时候把这个函数带入回调函数，header和data的数据之前已经存在了。
完成代码如下：
hExport() {
导入(“@/vendor/Export2Excel”)。然后(异步excel={
//发送ajax请求获取数据
const RES=await get employee(this . page，this.size)
const list=res.data.rows
Console.log(从后端获得的数据，列表)
const { header，data }=this.formatData(list)
//excel表示导入的模块对象。
console.log(标题，数据)
excel.export_json_to_excel({
//表头：[姓名，薪资]，//表头必选
Header: header，//header是必需的。
数据：数据，
文件名： excel-list ，//文件名
AutoWidth: true，//宽度是否自适应？
BookType: xlsx //生成的文件类型
})
})
},
总结：
上述代码已经过测试，可以直接用于实现结果。
附：vue-element-admin代码云，这个版本是有多个二次开发功能的那个。
# git clone https://github.com/panjiachen/vue-element-admin.git #从github获取代码
$ git clone https://gitee.com/mirrors/vue-element-admin.git #来自代码云
$ cd vue-element-admin #切换到特定目录
$ npm install #安装所有依赖项
$ npm run dev #启动开发和调试模式。检查package.json文件的脚本以了解启动命令。
关于Vue导出Excel的功能这篇文章到此为止。更多关于Vue导出Excel的功能，请搜索我们之前的文章或者继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。