纯前端实现导出Excel表格功能

涉及插件 ---- vue-json-excel

npm install vue-json-excel // 安装插件

import JsonExcel from \'vue-json-excel\'   // 在main.js 中引入并注册
Vue.component(\'downloadExcel\', JsonExcel)

HTML部分

<download-excel
　　:data="json_data"
　　:fields = "json_fields"
    name = "表名称"
>
　　导出Excel
</download-excel>

<--
name=“用户统计列表” --------------导出Excel文件的文件名
:fields = “json_fields” ----------------Excel中表头的名称
:data = “json_data” -------------------导出的数据
-->

javaScript部分

export default{
   data(){
return{
          json_fields: {
//导出Excel表格的表头设置
            \'序号\': \'type\', 
           　\'姓名\': \'userName\',
            \'年龄\': \'age\',
            \'手机号\': \'phone\',
            \'注册时间\': \'createTime\',
          },
　　　　　　json_data:[ {
　　　　　　　　　　"userName":"张三",
　　　　　　　　　　"age":18,
　　　　　　　　　　"gender":null,
　　　　　　　　　　"phone":15612345612,
　　　　　　　　　　"createTime":"2019-10-22"
　　　　　　　　}, {
　　　　　　　　　　"userName":"李四",
　　　　　　　　　　"age":17,
　　　　　　　　　　"gender":null,
　　　　　　　　　　"phone":15612345613,
　　　　　　　　　　"createTime":"2019-10-23"
　　　　　　　　}]
　　　　　}

    }
 }