使用vue-json-excel将后台的json数据导出excel表格

一：安装依赖

npm install vue-json-excel

二：在项目文件入口main.js全局引入

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

三：相关配置文档

四：在组件中使用
注意：因为我的json_data数据是通过请求从后台获取的，所以data里面声明的只是空数组

<template>
	<download-excel
       class = "export-excel-wrapper"
       :data = "json_data"
       :fields = "json_fields"
       title="毕业要求达成情况定性评价模型——基于应届毕业生毕业要求达成度调查问卷"
       name = "毕业要求达成情况定性评价模型.xls">
       <el-button type="primary" size="small" style="right: 30px;position: absolute;">导出EXCEL</el-	button>
     </download-excel>
</template>

<script>
  export default {
		data () {
		      return {
		        moXings:[],   //模型数据
		        json_fields: {
		          "毕业要求": "ord",
		          "指标点": "ord1",
		          "NA": "na", 
		          "NB": "nb", 
		          "NC": "nc",
		          "ND": "nd",
		          "NE": "ne", 
		          "达成情况评价值": "estimate",
		        },
		        json_data:[],    //导出表格数据
		        json_meta: [
		          [
		            {
		              " key ": " charset ",
		              " value ": " utf- 8 "
		            }
		          ]
		        ]
		      }
		    },
 	}
</script>

经过请求获取数据后进一步处理后打印输出json_data数据：

效果图如下：

最后，一个简单的将json数据以表格文件导出本地的功能就完成了