前端 vue表格数据导出Excel 文件实现

实现思路

1. 使用json2csv将后台json数据转化为csv格式数据

2. 采用创建Blob（二进制大对象）的方式来存放缓存数据； 生成下载链接；

3. 创建一个a标签，设置href和download属性

4. 触发a标签的点击事件实现下载

实现如下：

表格为 <Table :columns="columns" :data="listdata"></Table>

假设数据格式如下： （实现子集数据也可导出成一条数据）

listdata： [{AreaName: '区域1',ProjectManager: '小丽',ProjectName:'区域1项目',money: 6666，
             children：{AreaName: '区域1',ProjectManager: '小1',ProjectName:'项目1',money: 1236，}}, // 当存在子集数据时
            {AreaName: '区域2',ProjectManager: '小红',ProjectName:'区域2项目',money: 8866}],

columns: [{title: '所属区域',key: 'AreaName'},{title: '负责人',key: 'ProjectManager'},{title: '项目名称',key: 'ProjectName'},{title: '金额',key: 'money'}],

实现代码：

// 先将子集数据处理为第一层级数据
    ListDataSplit (listData, newData) {
      listData.map((item, index) => {
        if (item.children && item.children.length) {
          newData.push(item)
          this.ListDataSplit(item.children, newData)
        } else {
          newData.push(item)
        }
      })
    },

// 导出
export () {

　　if (this.listData.length < 0) {

　　　　this.$Message.warning('数据为空')

　　　　return

　　}

　　let newData = []

　　this.ListDataSplit(this.listData, newData)

    // 处理完数据后， 调用导出的方法

　　this.exportFn(newData, this.columns)    

  }，

// 导出方法
    exportFn (listdata, columns) {
      let Parser = require('json2csv').Parser
      let fields = []
      columns.map(col => {
        if (col.title && col.key) {
          let obj = {
            label: col.title,  // 表头名称
            value: col.key     // 表取值字段key
          }
          fields.push(obj)
        }
      })
      let fileName = '表格数据导出_' + new Date().toLocaleString('zh-CN')
      let json2csvParser = new Parser({fields})
      let result = json2csvParser.parse(listdata)
      let blob = new Blob(['ufeff' + result], {type: 'text/csv'})
      let a = document.createElement('a')
      a.setAttribute('href', URL.createObjectURL(blob))
      a.setAttribute('download', `${fileName}.csv`)
      a.click()
    },