后台传blob前端下载

文件处理下载处理

get请求

downloadFile () {
      this.$http({
        method: 'get',
        url: '请求地址',
        params: '请求参数',
        responseType: 'blob'
      }).then(res => {
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
          window.navigator.msSaveOrOpenBlob(res.data, '下载文件名称')  // 兼容ie11
        } else {
          let aTag = document.createElement('a')
          aTag.download = '下载文件名称'
          aTag.href = URL.createObjectURL(res.data)
          document.body.appendChild(aTag)  //兼容火狐
          aTag.click()
          setTimeout(function () {
            document.body.removeChild(aTag)
          }, 1000)
        }
      })
    },

post请求

this.$http({
        method: 'post',
        url: '请求地址',
        data: '请求参数',
        responseType: 'blob'
      }).then(res => {
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
          window.navigator.msSaveOrOpenBlob(res.data, '下载文件名称') // 兼容ie11
        } else {
          let aTag = document.createElement('a')
          aTag.download = '下载文件名称';
          aTag.href = URL.createObjectURL(res.data)
          document.body.appendChild(aTag) //兼容火狐
          aTag.click()
          setTimeout(function () {
            document.body.removeChild(aTag)
          }, 1000)
        }
      })

图片回显处理

正常图片存放云端返回一个url链接,这种方式最简单,但是有些项目将图片存放在自己主机,请求返回文件流的形式,这种就需要单独处理一下

async getImgUrl(item) {
      let imgUrl = '';
      await this.$http({
        method: "get",
        url: "图片下载地址",
        params: { ids: 图片id },
        responseType: "blob",
      }).then((res) => {
        let imgBlob = window.URL.createObjectURL(res.data);
        imgUrl = imgBlob;
      });
      return imgUrl;
    },

window.URL.createObjectURL(res.data);直接展示blob链接形式,比直接在img标签中放base64更加简洁,但是需要注意的是,这种展示形式不管图片有没有正常下载下来都会有一个链接,从而造成图片无法展示,这个时候通过转base64看看具体有没有图片
转base64:

// 转base64
// let fileReader = new FileReader();
// fileReader.readAsDataURL(res.data);
// fileReader.onload = e => {
//   console.log(e.target.result);
//   e.target.result
// }