导出 excel 表格（纯前端）和下载excel 文件

这里下载 excel 主要讲解两种方式。一种是前端导出excel ,另一种方式是通过调用后台提供的接口进行下载 excel.

(一)前端导出excel

1.Element组件库中的el-table表格导出需要的主要是两个依赖:(xlsx 和 file-saver)

npm install --save xlsx file-saver

2.给导出的表格添加 ID(这里表格是封装的组件)

<GuestRoomTable 
  :roomStatusedList='newList' 
  :total='total' 
  :page='page' 
  :pageSize="pageSize" 
  @changePage="changePage" 
  @changePageSize="changePageSize" 
  id="out-table"></GuestRoomTable>

3.导出方法：

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

// 导出 excel 
exportExcel () {
  /* generate workbook object from table */
  var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
  /* get binary string as output */
  var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
  try {
    FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheetjs.xlsx')
  } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
  return wbout
},

缺点：只能导出当前页的数据，无法导出所有数据。

(二)下载excel（文件流）

<el-button @click="uploadExcel">下载模板</el-button>

调用下载 excel 表格接口，在接口请求中，写明接口返回类型 arraybuffer，返回文件流信息。

将文件流信息放到 new 的 Blob 中，导出类型为 excel 的类型。

// 下载模板
uploadExcel(){
  Axios.post(`${Axios.defaults.baseURL}/room/template`, {}, {responseType: 'arraybuffer'}).then(res => {
    var blob = new Blob([res.data], {type: 'application/vnd.ms-excel'});
    var downloadElement = document.createElement('a');
    var href = window.URL.createObjectURL(blob); // 创建下载的链接
    downloadElement.href = href;
    downloadElement.download = '上传模板' +'.xlsx'; // 下载后文件名
    document.body.appendChild(downloadElement);
    downloadElement.click(); // 点击下载
    document.body.removeChild(downloadElement); // 下载完成移除元素
    window.URL.revokeObjectURL(href); // 释放掉blob对象
  })
},

注意： axios 请求时，指名返回类型: arraybuffer ，否则下载下拉的文件，打开会显示文件损坏。

（三）通过 URL 下载文件

通过 XMLHttpRequest 对象进行 http 通信

// 图片下载
download (row) {
  const $that = this
  const imgUrl = row.fileUrl
  let xhr = new XMLHttpRequest()
  xhr.open('get', imgUrl, true)
  // 至关重要
  xhr.responseType = 'blob'
  xhr.onload = function () {  // 请求成功回调函数
    if (this.status === 200) {
      // 得到一个blob对象
      let blob = this.response
      //至关重要
      $that.downloadFile(row.fileName, blob)
    }
  }
  xhr.send()
},

调用下载接口：

// 下载
downloadFile (fileName, blob) {
  var dowloadElement = document.createElement('a')
  var href = window.URL.createObjectURL(blob)
  let evt = document.createEvent('HTMLEvents')
  dowloadElement.href = href
  dowloadElement.download = fileName
  document.body.appendChild(dowloadElement)
  evt.initEvent('click', true, true)
  dowloadElement.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }))
  document.body.removeChild(dowloadElement)
  window.URL.revokeObjectURL(href)
  },
},

（四）通过 a 标签进行下载

利用 a 标签中 download 属性进行下载。

downloadURL(url, name) {
  const link = document.createElement('a')
  link.download = name
  link.href = url
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

实际用的过程会发现，这个方法大部分情况下都会打开一个新的页面，而且有兼容性问题。