Vue导出json数据到Excel电子表格

古城微笑少年丶 2023-06-13 08:58 44阅读 0赞

网上看了很多文档感觉都不全，这里写一篇完整的详细教程。

一、安装依赖

npm install file-saver --save
    npm install xlsx --save
    npm install script-loader --save-dev

二、下载两个所需要的js文件Blob.js和 Export2Excel.js。

这里贴下下载地址：

http://xiazai.jb51.net/201708/yuanma/Export2Exce_jb51.rar

三、src目录下新建vendor文件夹，将Blob.js和 Export2Excel.js放进去。

四、更改webpack.base.conf.js配置

在resolve的alias： 
    'vendor': path.resolve(__dirname, '../src/vendor')

五、在.vue文件中  
template:

script部分  
这是定义死数据用法

import {  export_json_to_excel } from '@/vendor/Export2Excel'
    data(){ 
      return{ 
      //这里的list是死数据，仅供参考，我下面用的是请求数据
        list:[
            { 
              id:'5',
              username:'chen',
              truename:'kysue',
              branchName:3423,
              branchId:3423,
              companyTel:55,
              mobile:55,
              email:55,
              comments:55
          },
          { 
              id:'6',
              username:'su',
              truename:'sue',
              branchName:3423,
              branchId:3423,
              companyTel:55,
              mobile:55,
              email:55,
              comments:55
          }
        ]
      }
    
    methods:{ 
       downloadFile () { 
             //list与data的list相对应
              var list = this.list
              var tHeader = [
                'Id',
                '用户名',
                '真实姓名',
                '部门名称',
                '部门id',
                '座机',
                '手机',
                '电子邮箱',
                '备注'
              ]
              var filterVal = [
                'id',
                'username',
                'truename',
                'branchName',
                'branchId',
                'companyTel',
                'mobile',
                'email',
                'comments'
              ]
              var data = this.formatJson(filterVal, list)
              export_json_to_excel(tHeader, data, '员工列表')
        },
    formatJson(filterVal, jsonData) { 
        　　　　return jsonData.map(v => filterVal.map(j => v[j]))
        　　},

这是我工作时，请求接口的做法

import {  export_json_to_excel } from '@/vendor/Export2Excel'
    methods:{ 
       downloadFile () { 
          const query = { 
            pageNum: 1,
            pageSize: 99999
          }
          //请求员工数据
          fetchStaffList(query).then(
            res => { 
              var list = res.data.staffs
              var tHeader = [
                'Id',
                '用户名',
                '真实姓名',
                '部门名称',
                '部门id',
                '座机',
                '手机',
                '电子邮箱',
                '备注'
              ]
              var filterVal = [
                'id',
                'username',
                'truename',
                'branchName',
                'branchId',
                'companyTel',
                'mobile',
                'email',
                'comments'
              ]
              var data = this.formatJson(filterVal, list)
              export_json_to_excel(tHeader, data, '员工列表')
            },
            err => { 
              console.error(err)
            }
          )
        },
        formatJson (filterVal, jsonData) { 
          return jsonData.map(v =>
            filterVal.map(j => { 
              if (j === 'branchName') { 
                return v['branch'] ? v['branch']['name'] : ''
              }
              if (j === 'branchId') { 
                return v['branch'] ? v['branch']['id'] : ''
              }
              return v[j]
            })
          )
        },

这里说明一下：

1、`tHeader`是每一栏的名称，需手动输入。  
2、`filterVal`是data中list的key值，也是要自己写的。即 ‘Id’,‘用户名’, ‘真实姓名’, ‘部门名称’, ‘部门id’,‘座机’,‘手机’,‘电子邮箱’,备注’。  
3.这里可定义导出的excel文件名； ‘员工列表’

export_json_to_excel(tHeader, data, '员工列表')

参考文章：[https://segmentfault.com/a/1190000012117303][https_segmentfault.com_a_1190000012117303]

[https_segmentfault.com_a_1190000012117303]: https://segmentfault.com/a/1190000012117303