vue添加excel导出

参考url:

https://xuliangzhan.github.io/vxe-table/#/table/other/xlsx

https://github.com/xuliangzhan/vxe-table/blob/master/examples/views/table/other/Xlsx.vue

1.install包

npm i xlsx

npm i file-saver

import XLSX from 'xlsx'
import FileSaver from 'file-saver'

2.添加按钮

<a-button type="primary" size="small" class="vaa" @click="exportEventSelect">Excel导出</a-button>

3.添加table

<vxe-grid
  border
  ref="xGrid2"
  height="300"
  :span-method="rowspanMethod"//定义列合并方法
  :columns="tableColumn"//定义列
  :data="reportTableData"></vxe-grid>//定义表格数据源

4.添加js,包含标题和非标题

//add start
,exportEvent () {
  // 转换数据
  let table = this.getExportDataAll(true);
  // let table = this.$refs.xGrid2.$el.querySelector('.body--wrapper>.vxe-table--body')
  let book = XLSX.utils.book_new()
  let sheet = XLSX.utils.table_to_sheet(table)
  XLSX.utils.book_append_sheet(book, sheet)
  let wbout = XLSX.write(book, { bookType: 'xlsx', bookSST: false, type: 'binary' })
  let blob = new Blob([this.toBuffer(wbout)], { type: 'application/octet-stream' })
  // 保存导出
  FileSaver.saveAs(blob, '数据导出.xlsx')
}
, getExportDataAll (isHead) {
  let datas = this.$refs.xGrid2.$el.querySelector('.body--wrapper>.vxe-table--body')
  console.log("getExportDataAll");
  console.log(datas);
  let columns = this.tableColumn.filter(item => item.field)
  let headers = isHead ? [columns.map(item => item.title)] : []
  return headers.concat(
    datas.map(row => {
      return columns.map(column => {
        return row[column.field]
      })
    })
  )
}
,exportEventSelect () {
  // 对数据预处理
  let data = this.getExportData(true)
  // 转换数据
  let book = XLSX.utils.book_new()
  let sheet = XLSX.utils.json_to_sheet(data, { skipHeader: true })
  XLSX.utils.book_append_sheet(book, sheet)
  let wbout = XLSX.write(book, { bookType: 'xlsx', bookSST: false, type: 'binary' })
  let blob = new Blob([this.toBuffer(wbout)], { type: 'application/octet-stream' })
  // 保存导出
  FileSaver.saveAs(blob, '选中数据导出.xlsx')
}

, getExportData (isHead) {
  let datas = this.$refs.xGrid2.getTableData().tableData//导出所有数据包含头
//let datas = this.$refs.xGrid1.getSelectRecords()//导出选中数据包含头
  console.log("getExportData");
  console.log(datas);
  let columns = this.tableColumn.filter(item => item.field)
  let headers = isHead ? [columns.map(item => item.title)] : []
  return headers.concat(
    datas.map(row => {
      return columns.map(column => {
        return row[column.field]
      })
    })
  )
},
toBuffer (wbout) {
  let buf = new ArrayBuffer(wbout.length)
  let view = new Uint8Array(buf)
  for (let index = 0; index !== wbout.length; ++index) view[index] = wbout.charCodeAt(index) & 0xFF
  return buf
}
,// 通用行合并函数（将相同多列数据合并为一行）
rowspanMethod ({ row, $rowIndex, column, data }) {
  let fields = ['sex']
  let cellValue = row[column.property]
  if (cellValue && fields.includes(column.property)) {
    let prevRow = data[$rowIndex - 1]
    let nextRow = data[$rowIndex + 1]
    if (prevRow && prevRow[column.property] === cellValue) {
      return { rowspan: 0, colspan: 0 }
    } else {
      let countRowspan = 1
      while (nextRow && nextRow[column.property] === cellValue) {
        nextRow = data[++countRowspan + $rowIndex]
      }
      if (countRowspan > 1) {
        return { rowspan: countRowspan, colspan: 1 }
      }
    }
  }
}
//add end

 

 

4.添加js