vue 前端实现批量导出 || 后端

  //前端  
// import FileSaver from 'file-saver'
// import xlsx from 'xlsx'

  exportTableData() {
      const selectionData = this.selectionData
      if (selectionData.length === 0) {
        this.$message({
          message: '请选择你要导出的客户数据',
          type: 'warning'
        })
        return
      }
      this.$confirm(
        '确认导出报表数据，是否继续', '导出', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
//模拟数据 此处是2个sheet 

 var exportData = [[{ column_name: '1', description: '2', character_maximum_length: '3', numeric_scale: '4', isKey: '5', data_type: '6' }], [{ column_name: '2', description: '3', character_maximum_length: '4', numeric_scale: '5', isKey: '6', data_type: '7' }]]

// 把选中的数据导出成一个excel
        // const header = ['column_name', 'description', 'data_type', 'character_maximum_length', 'numeric_scale', 'isKey']
        // const headerDisplay = { column_name: '字段名称', description: '字段描述', data_type: '字段类型', character_maximum_length: '长度', numeric_scale: '小数点', isKey: '是否主键' }
        // var workbook = xlsx.utils.book_new() // 创建一个excel
        // for (let k = 0; k < exportData.length; k++) {
        //   var newData = [headerDisplay, ...exportData[k]]
        //   var worksheet = xlsx.utils.json_to_sheet(newData, { header: header, skipHeader: true })
        //   xlsx.utils.book_append_sheet(workbook, worksheet, `数据中台数据表${k + 1}`)
        // }
        // // 指定表名
        // const wscols = [ // 每列不同宽度px
        //   { wch: 12 },
        //   { wch: 26 },
        //   { wch: 12 },
        //   { wch: 12 },
        //   { wch: 14 },
        //   { wch: 12 }
        // ]
        // worksheet['!cols'] = wscols
        // const wsrows = [{ hpx: 20 }] // 高
        // for (let i = 0; i <= exportData.length; i++) { // total  列表条数
        //   wsrows.push({ hpx: 20 })
        // }
        // worksheet['!rows'] = wsrows
        // // xlsx.utils.book_append_sheet(workbook, ws2, 'sheet2')
        // var wbOut = xlsx.write(workbook, {
        //   bookType: 'xlsx',
        //   bookSST: true,
        //   type: 'array'
        // })
        // try {
        //   FileSaver.saveAs(
        //     new Blob([wbOut], { type: 'application/octet-stream' }),
        //     '数据中台数据表.xlsx'
        //   )
        // } catch (e) {
        //   if (typeof console !== 'undefined') console.log(e, wbOut)
        // }
        // return wbOut
      }).catch(() => {})
    },

后端实现下载  前端接口 axios配置
 

export function exportTableInfo(data) {
  return request({
    url: `/tableInfo/exportTableInfo?${data}`,
    method: 'post',
    withCredentials: false,
    isGetfile: true,
    headers: { 'Content-Type': 'application/octet-stream' },
    responseType: 'blob' // 乱码
  })
}

    exportTableData() {
      const selectionData = this.selectionData
      if (selectionData.length === 0) {
        this.$message({
          message: '请选择你要导出的客户数据',
          type: 'warning'
        })
        return
      }
      this.$confirm(
        '确认导出报表数据，是否继续', '导出', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        var data = {
          tablenames: []
        }
        for (let i = 0; i < selectionData.length; i++) {
          data.tablenames.push(selectionData[i].tableName)
        }
这里的传参根据后端需要传
        exportTableInfo('tablenames=' + (data.tablenames.length > 1 ? data.tablenames : (data.tablenames + ','))).then(response => {
          console.log(response)
          if (response.data.message) {
            this.$message({
              message: response.data.message,
              type: 'error',
              duration: 3 * 1000
            })
          } else {
            if (window.navigator.msSaveOrOpenBlob) {
              const blob = new Blob([response.data])
              // 兼容ie浏览器
              window.navigator.msSaveBlob(blob, '数据中台数据表.xls')
            } else {
              const blob = new Blob([response.data])
              const downloadElement = document.createElement('a')
              const href = window.URL.createObjectURL(blob) // 创建下载的链接
              downloadElement.href = href
              downloadElement.download = '数据中台数据表.xls' // 下载后文件名
              document.body.appendChild(downloadElement)
              downloadElement.click() // 点击下载
              document.body.removeChild(downloadElement) // 下载完成移除元素
              window.URL.revokeObjectURL(href) // 释放掉blob对象
            }
          }
        })
      }).catch(() => {})
    },

注意： 页面 这里的导出内容是根据  表名称去查的需要导出的数据  并不是页面的数据