vue项目后台返回流文件下载和url下载_vue文件流下载后端文件

第一种后台返回url的下载

https://xxx/xxx20230801154328b4950ca6-c6f2-44f7-8466-fc6ca89ce166.xlsx

let url = file;//这里是后台返回的url
let a_link = document.createElement('a')
// 这里是将url转成blob地址，
fetch(url).then((res) => res.blob())
 .then((blob) => {
    // 将链接地址字符内容转变成blob地址
    a_link.href = URL.createObjectURL(blob)
    console.log(a_link.href)
    a_link.download = fileName + '.xlsx' //下载的文件的名字
    document.body.appendChild(a_link)
    a_link.click()
})

第二种后台返回的是二进制流文件

//请求流文件的方式  
axios({
       method: 'post',
       url: process.env.BASE_API + '/api/register/download',
       data: {
          "confirmFlg": true,
           "data": {},//上传的参数
        },
        headers: {
           Authorization: 'Bearer ' + this.$store.getters.token
        },
        responseType: 'blob' //非常重要不可少
     }).then(res => { // 后台返回的数据 res中存储
          
 
         // 判断一下后台是否是成功的，成功后直接下载
         if (res.status === 200) {
            const url = window.URL.createObjectURL(new Blob([res.data]))//返回的数据
            const link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', fileName + '.xlsx')//文件名
            document.body.appendChild(link)
            link.click()
            link.remove()
         }
      })

上传文件时接口参数要求二进制文件流

let requestDatas = new FormData()
  
requestDatas.append('file', this.$refs.dmtUploadFile.uploadFiles[0].raw)//获取上传的文件信息
request({
    url: url,
    method: 'POST',
    data: requestDatas
 
 }).then(res => {
       
 })