Vue数据转为Excel表格

Vue数据转为Excel表格

一、 需求

最近项目中遇到需要将从后台拿到的数据（主要是后台数据）转换为Excel表单形式

形式如下

做法

1.安装

既然我们需要用到，肯定有人也想到了，所以我们直接拿来用！

注意：先用cd切换到自己的项目路径，之后在输入下面的代码

npm install vue-json-excel -S

2.main.js加入挂载

//excel
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)

3.在页面中使用下载

<el-button

    type="primary"
    size="small" >
  <download-excel class="export-excel-wrapper" :data="tableDataDownload" :fields="json_fields" name="职位信息Excel">
  </download-excel>
</el-button>

当然这里不需要el-button也可以。

4.分析代码

**:data=“tableDataDownload”**这里tableDataDownload是咱们从后台获取的值，

这里的就是咱们的后台拿到的，当然，你自己要实现的话，你可以自己写一个静态的tableDataDownload数据

这里我就写了一个静态的，以便演示

tableDataDownload[
{
positionId:1c1e2b88-1e5e-43a3-9b69-d7047373485e,
departmentName:"部门",
company:"湖南中医药大学第一附属医院",
positionName:"临床医学"
jobRequirements:"要求不高，你会Vue就行",
salaryCeiling:"男",
salaryLimit:"20",
location:"",


}
]

:fields="json_fields"

这里是给咱们的excel表的每一列起名字，这里的key就是列名，后面的value就是需要与tableDataDownload的字段对应啦，同时需要加分号哟

json_fields: {
  "编号": "positionId", //常规字段
  "部门名":"departmentName",
  "医院名": "company",
  "职位名":"positionName",
  "职位要求 ":"jobRequirements", //支持嵌套属性
  "薪资下线":"salaryCeiling",
  "薪资上限":"salaryLimit",
  "地理位置":"location",


},

name="职位信息Excel"

这里就是给咱们的exce起名字的

二、 优化

如果我们不对源码进行修改的话，默认是Download，我们点击进入到crtl+右键进入，然后同样进入JsonEcel中，

找到对于的位置，将对应的Download改成下载即可

三、 总结

好了，至此数据转换为excel表格形式就已经完成了

如果有什么疑问或者技术问题，欢迎咨询

QQ：1098392728