Vue实现下载后端返回Excel文件流

在vue中, 接收并下载文件流可以通过将其转成blob对象或者arraybuffer，添加到a标签或者iframe标签中来模拟下载.

/**
 *下载导出文件
 * @param blob  ：返回数据的blob对象或链接
 * @param tagFileName  ：下载后文件名标记
 * @param fileType  ：文件类 word(docx) excel(xlsx) ppt等
 */
export const downloadExportFile = (blob, tagFileName, fileType) => {
  var downloadElement = document.createElement('a')
  var href = blob
  if (typeof blob == 'string') {
    downloadElement.target = '_blank'
  } else {
    href = window.URL.createObjectURL(blob) //创建下载的链接
  }
  downloadElement.href = href
  if (fileType) {
    downloadElement.download = tagFileName + '.' + fileType //下载后文件名
  } else {
    downloadElement.download = tagFileName //下载后文件名
  }

  document.body.appendChild(downloadElement)
  downloadElement.click()
  //点击下载
  document.body.removeChild(downloadElement) //下载完成移除元素
  if (typeof blob != 'string') {
    window.URL.revokeObjectURL(href) //释放掉blob对象
  }
}

/**
 * 4.2.8 分类excel导出接口
 * @returns
 */
export const categoryExcelExport = (params) => {
  return request({
    url: classLabelApi.categoryExcelExport,
    method: 'get',
    responseType: 'blob',
    params,
  })
}

/**
 * 4.2.8 分类excel导出接口
 * @returns
 */
export const categoryExcelExport = (params) => {
  return request({
    url: classLabelApi.categoryExcelExport,
    method: 'get',
    responseType: 'blob',
    params,
  })
}

//导出分类Excel
exportClassfilyExcel() {
  categoryExcelExport().then((res) => {
    this.$message.success('正在下载中...')
    downloadExportFile(res, '全部分类导出', 'xls')
  })
},