VUE中关于文件下载的问题解决

93 阅读1分钟

1. get形式传参数

window.location = '/dms-underlying-asset/download?assetType=' + localStorage.getItem('assetType')

2. post形式传参数

注意:请求类型:responseType: "blob"

1)定义接口(post请求,responseType:数据返回类型为blob)

 export function download(data) {
   return request({
     url: `api/exportExcel`,
     method: 'post',
     responseType: 'blob',
     data
   })
 }
 
const res = await download(this.form)
console.log(res, '这里会看到返回的blob文件流')   
if (!res) return 
const excelTitle = "xxx.xlsx"
this.readFileDownload(res, excelTitle)    // 封装读取文件并下载


export function readFileDownload(data, msg) {
  var res = data
  if (res.type === 'application/json' || res.type === 'application/json;charset=UTF-8') {     // 失败的时候,注意ie兼容问题
    let fileReader = new FileReader()
    fileReader.onload = function(event) {
      let jsonData = JSON.parse(this.result) // this.result是根据event,读取文件后打印的
      console.log(jsonData, '...............')
      if (jsonData.data === null && jsonData.code === 1) {
        Message({
          message: jsonData.msg || 'Error',
          type: 'error',
          duration: 5 * 1000
        })
      }
    }
    fileReader.readAsText(res)
  }
  if (res.type === 'application/octet-stream' || res.type === 'application/vnd.ms-excel' || res.type === 'application/vnd.ms-excel;charset=UTF-8') {
  
    const blob = new Blob([res], { type: 'application/vnd.ms-excel;charset=utf-8' })

    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
      window.navigator.msSaveOrOpenBlob(blob, msg)
    } else {
      console.log(blob)
      const url = window.URL.createObjectURL(blob)
      console.log(url)
      const aLink = document.createElement('a')
      aLink.style.display = 'none'
      aLink.href = url
      aLink.setAttribute('download', msg)
      document.body.appendChild(aLink)
      aLink.click()
      document.body.removeChild(aLink)
      window.URL.revokeObjectURL(url)
    }
  }
}