Vue + iView 纯前端excel数据导出

纯前端excel数据导出

---

前言

为了便于用户更好的对数据进行筛选操作统计。

---

基于Vue框架、iView UI组件开发

一、需求

1. 将表格中的所有数据导出
2. 有数据则导出，无数据则提示导出失败

二、需求开发

1.需要用到的组件

代码如下（示例）：

//导出按钮
<Row type="flex" justify="end" align="bottom" class="code-row-bg">
    <Button type="success" @click="tableExport">导出</Button>
    </Row>
//表格
<Table border :columns="tableInfo" :data="recordList.rows"></Table>
//分页
<Page :total="recordList.total" :page-size="recordList.limit" :current="recordList.page"  @on-change="changePageHandler" show-elevator show-total></Page>

表格展示如下（示例）：

2.定义数据

代码如下（示例）：

 data () {
    return {
      tableInfo: [
        {
          title: 'Name',
          key: 'name'
        },
        {
          title: 'Age',
          key: 'age'
        },
        {
          title: 'Num',
          key: 'num',
          render: (h, params) => {
            return h('span', this.showNum(params.row.num))
          }
        },
        {
          title: 'Address',
          key: 'address'
        },
        {
          title: 'Date',
          key: 'date'
        }
      ],
      //表单信息
      listData：{
      page:1,
      size:10,
      ....
      }
      //表格数据
      recordList: [],
      //用于后面存储后端返回的总数量
      exportTotal:0,
    }
  },

3.获取表格数据

1、接口请求

 mounted () {
    this.list()
  },
  methods: {
    list () {
    //page:当前页数，size:请求条数（后端要啥数据就传啥数据）
     let data = {page:1,size:20}
     //接口请求
        getRecordList(data).then((res) => {
          if (res.status === 200) {
            let recordList = res.data || []
            //解构
            let {total} = recordList
            //将total赋值（方便后面数据导出时使用）
            this.exportTotal=total
           
          } else {
          //接口请求失败
            this.$Message.error(res.msg)
          }
        })
      } 
   },
    showNum (data) {
      let showNum = ''
      switch (data) {
        case 'one':
          showNum = '数字一'
          break
        case 'two':
          showNum = '数字二'
          break
        case 'three':
          showNum = '数字三'
          break
        case 'four':
          showNum = '数字四'
          break
        default:
          showNum = 'ss'
      }
      return showNum
    }
  }
}

2、接口返回的数据结构

 //为了方便看看数据结构，造个假的吧😛接口数据结构如下
      this.recordList = {
        total: 8,
        page: 1,
        size: 10,
        rows: [
          {
            name: 'John Brown',
            age: 18,
            num: 'one',
            address: 'New York No. 1 Lake Park',
            date: '2016-10-03'
          },
          {
            name: 'Jim Green',
            age: 24,
            num: 'two',
            address: 'London No. 1 Lake Park',
            date: '2016-10-01'
          },
          {
            name: 'Joe Black',
            age: 30,
            num: 'three',
            address: 'Sydney No. 1 Lake Park',
            date: '2016-10-02'
          },
          {
            name: 'Jon Snow',
            age: 26,
            num: 'four',
            address: 'Ottawa No. 2 Lake Park',
            date: '2016-10-04'
          },
          {
            name: 'John Brown',
            age: 18,
            num: 'one',
            address: 'New York No. 1 Lake Park',
            date: '2016-10-03'
          },
          {
            name: 'Jim Green',
            age: 24,
            num: 'two',
            address: 'London No. 1 Lake Park',
            date: '2016-10-01'
          },
          {
            name: 'Joe Black',
            age: 30,
            num: 'three',
            address: 'Sydney No. 1 Lake Park',
            date: '2016-10-02'
          },
          {
            name: 'Jon Snow',
            age: 26,
            num: 'four',
            address: 'Ottawa No. 2 Lake Park',
            date: '2016-10-04'
          }
        ]
      }
    

4.导出

1、导出方法一，后端接收数据值时，可能存在限制，size过大时，接口挂了😂

// 导出
    tableExport () {
      // 导出所有信息
      //判断一下表格中是否有数据，有则请求接口获取数据，并导出；无数据则提示数据为空，导出失败
      if (this.exportTotal > 0) {
       //这里将表格数据的总数赋值size传给后端
        this.listData = {page:1,size:this.exportTotal}
      let data = JSON.parse(JSON.stringify(this.listData))
        //接口请求
        getRecordList(data).then((res) => {
          if (res.status === 200) {
            let exportList = res.data || []
            let {rows} = exportList
           //这一步是为了处理一下接口返回的数据
            rows.forEach((item) => {
              Object.assign(item, {
                num:this.showNum(item.num)
              })
            })
            //调用数据导出的方法并传入数据
            this.exportExcelFile(rows)
          } else {
            this.$Message.error(res.msg)
          }
        })
      } else {
        this.$Message.warning('数据为空，导出失败')
      }
    },
//数据导出成excel表格
exportExcelFile (excelData) {
      const w = [50, 133, 130, 130, 130] //excel的列宽
      const th = [
        'Name', 'Age', 'Num',  'Address', 'Date', 
     ]
      const filterVal = [
        'name',
        'age',
        'num',
        'address',
        'date',
      ]
      const data = excelData.map(v => filterVal.map(k => v[k]))
      const [fileName, fileType, sheetName] = ['列表', 'xlsx', '列表信息']
      toExcel({ th, data, fileName, fileType, sheetName, w })
    }

2、导出方法二，当方法一size过大时，那就只能多请求几次接口咯🉑

tableExport () {
      // 导出所有信息
      if (this.exportTotal > 0) {
        let data = JSON.parse(JSON.stringify(this.listData))
      //定义空数组存查询的数据
        let queryList = []
        const queryData = (exportPage) => {
          data.pageSize = 1000
          //判断有无exportPage重新赋值page
          if (exportPage) {
            data.page = exportPage
          }

           getRecordList(data.pageSize,data.page).then((res) => {
            this.loading = false
            if (res.status === 200) {
              let exportList = res.data || []
              let {rows, total} = exportList
              //这一步是为了处理一下接口返回的数据
            rows.forEach((item) => {
              Object.assign(item, {
                num:this.showNum(item.num)
              })
            })
              queryList = queryList.concat(rows)
              //当接口返回的total等于查询数据的长度时，✔调用数据的导出方法
              if (total === queryList.length) {
                this.exportExcelFile(queryList)
                this.$Message.info('导出成功')
              } else { //当接口返回的total不等于✘查询数据的长度时
               //那就只能page+1在调一次接口了
                let exportPage = exportList['page'] += 1
                queryData(exportPage)
              }
   
            } else {
              this.$Message.error(res.msg)
            }
          })
        }
        queryData()
      } else {
        this.$Message.warning('数据为空，导出失败')
      }
    },

---

总结

请求表格数据的接口和导出请求的是同一个接口，复制的时候记得改改接收接口返回数据的变量名，避免表格数据出现问题
数据量较少时，可采用第一种方法，数据量较多时，建议第二种