vue 将文件url 改成文件流下载

vue 将后台返回文件url 改成文件流下载

由于直接a 标签下载视频，音频会打开新的窗口，所以改用文件流下载

一、图片

  exportData(row) {
      console.log('row', row)
      const reqUrl = row.url
      const fileName = row.fileName 
      downFile(reqUrl)
        .then((data) => {
          if (data) {
            const url = window.URL.createObjectURL(new Blob([data], { type: 'image/jpeg' }))
            const link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', fileName + '.jpeg')
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link) // 下载完成移除元素
            window.URL.revokeObjectURL(url) // 释放掉blob对象
          }
        })
        .catch((e) => {
        })
    },

二、视频

     exportData(row) {
      console.log('row', row)
      const reqUrl = row.url
      const fileName = row.fileName 
      downFile(reqUrl)
        .then((data) => {
          if (data) {
            const url = window.URL.createObjectURL(new Blob([data], { type: 'video/mp4' }))
            const link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', fileName + '.mp4')
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link) // 下载完成移除元素
            window.URL.revokeObjectURL(url) // 释放掉blob对象
          }
        })
        .catch((e) => {
       
        })
    },

三、音频

     exportData(row) {
      console.log('row', row)
      const reqUrl = row.url
      const fileName = row.fileName 
      downFile(reqUrl)
        .then((data) => {
          if (data) {
            const url = window.URL.createObjectURL(new Blob([data], { type: 'audio/mpeg' }))
            const link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', fileName + '.mp3')
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link) // 下载完成移除元素
            window.URL.revokeObjectURL(url) // 释放掉blob对象
          }
        })
        .catch((e) => {
       
        })
    },

四、zip

     exportData(row) {
      console.log('row', row)
      const reqUrl = row.url
      const fileName = row.fileName 
      downFile(reqUrl)
        .then((data) => {
          if (data) {
              const url = window.URL.createObjectURL(new Blob([data]), { type: "application/zip" })
          const link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', row.opusCode + '.zip')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link) // 下载完成移除元素
          window.URL.revokeObjectURL(url) // 释放掉blob对象
          }
        })
        .catch((e) => {
       
        })
    },

export function downFile(url, parameter) {
  return request({  // request为封装的请求
    url,
    data: qs.stringify(parameter),
    method: 'get',
    responseType: 'blob'

  })
}