vue接收zip文件

使用封转的ajax请查看

downloadSummary() {
    this.loading = true
    let fileurl =
        '/export/download/all' + '?' + 'batchCode=' + this.form.batchCode + '&' + 'flag=' + this.form.templateName
    //文件下载
    this.exportFile(fileurl)
},

    //文件下载功能
exportFile(fileurl) {
        let url = this.$http.adornUrl(fileurl, 'proxyLS')
        axios({
            method: 'get',
            url: url,
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
                Authorization: sessionStorage.getItem('authorization'),
            },
            responseType: 'arraybuffer',
        }).then((res) => {
            this.loading = false
            let str3 = ''
            if (res.headers['content-disposition']) {
                let str = res.headers['content-disposition']
                let strLength = 'attachment;filename='.length
                str3 = decodeURIComponent(str.slice(strLength))
            }
            const data = res.data
            //  { type: 'application/vnd.ms-excel' }
            const url = window.URL.createObjectURL(new Blob([data]))
            const link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', str3)
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
            
            
            /*如果返回为图片时候
              let url= arrayBufferToBase64(res);//res为后台返回的ArrayBuffer
              document.getElementById('img').src='data:image/jpeg;base64,'+url;
             */
        })
        },

• 可能会出现的问题： 请求返回的全局拦截器进行了拦截，因此可以对返回的内容进行判断来处理

  axios.interceptors.response.use((res) => {
     if (res.data.code == 200 || res.data.status_code == 200) {
         return Promise.resolve(res.data)
     } else if(res.data.code == 401) {
     ...
     } else {
         //当返回的为流文件，并且为[object Blob]的时候
         if(res.status ==200 && Object.prototype.toString.call(res.data) == '[object Blob]' ||&& Object.prototype.toString.call(res.data) == '[object ArrayBuffer]'){//解决头像html2canvas会出现的问题外联无法下载问题，解决为后台直接返回流会被这个返回拦截器拦截到错误
             return Promise.resolve(res.data)
         }
         Message.error(res.data.status_desc || 'Error');
         return Promise.reject(res.data);
     }
     }, (err) => {
         // tryHideFullScreenLoading();
         // Message({ message: err.message, type: 'error' })
         return Promise.reject(err)
  })
  
  

更多参考： 二进制流转换为img