在vue框架中, 接收并下载文件流（blob对象）
 　　可以通过将其转成blob对象，添加到a标签或者iframe标签中来模拟下载（或者pdf预览）
 
1.首先设置responseType对象格式为 blob:
 　　responseType:‘blob’
 
在项目reques.js文件中 添加请求头的相关配置 如header responseType 等
config.headers['Authorization'] = getToken()
      if(config.responseType){
        config.responseType = 'blob'
      }
 
在api.js文件中   添加responseType:'blob'参数
//授权码下载 
export function downloadcode(query) {
  return request({
    url: '/authCode/download',
    method: 'get',
    params: query,
    responseType:'blob'
  })
}
 
项目页面中：
//下载方法
    handleDown(row) {
      const data = {
        id:row.id
      }
      downloadcode(data).then(res => {
        console.log("下载的文件流",res)
        const link=document.createElement('a');
        try{
	          // let blob = new Blob([res.data],{type: 'application/vnd.ms-excel'});    //如果后台返回的不是blob对象类型，先定义成blob对象格式
	          let blob =  res.data    //如果后台返回的直接是blob对象类型，直接获取数据
	          let _fileName = res.headers['content-disposition'].split(';')[1].split('=')[1]; //拆解获取文件名，
	          link.style.display='none';
	          
	          方法1: 创建--下载--销毁
	          // 兼容不同浏览器的URL对象
	          const url = window.URL || window.webkitURL || window.moxURL;
	          link.href=url.createObjectURL(blob);
	          link.download = _fileName;   //下载的文件名称
	          link.click();
	          window.URL.revokeObjectURL(url);  //  #URL.revokeObjectURL()方法会释放一个通过URL.createObjectURL()创建的对象URL. 当你要已经用过了这个对象URL,然后要让浏览器知道这个URL已经不再需要指向对应的文件的时候,就需要调用这个方法.

			方法2:  创建--下载--销毁
			   // 兼容不同浏览器的URL对象
	          const url = window.URL || window.webkitURL || window.moxURL;
	          link.href=url.createObjectURL(blob);
	          link.setAttribute('download'_fileName.substring(_fileName.lastIndexOf('_')+1)));
              document.body.appendChild(link);
              link.click();
              document.body.removeChild(link);
              url.revokeObjectURL(link.href);//销毁url对象
        }catch (e) {
          console.log('下载的文件出错',e)
        }
      })
    },
 
返回的文件流 示例：
 
 
axios get 请求方式
 
	axios.get(`/dev-api/authCode/download?id=`+row.id,
        { //请求头需要的一些配置
          headers:{
              "Authorization":getToken()
            },
          responseType: 'blob',//设置返回类型
        }
     ).then((res)=>{
        console.log('下载的文件',res)
        const link=document.createElement('a');
        try{
	          let blob =  res.data
	          let _fileName = res.headers['content-disposition'].split(';')[1].split('=')[1];//文件名，中文无法解析的时候会显示 _(下划线),生产环境获取不到
	          link.style.display='none';
	          // 兼容不同浏览器的URL对象
	          const url = window.URL || window.webkitURL || window.moxURL;
	          link.href=url.createObjectURL(blob);
	          link.download = _fileName;
	          link.click();
	          window.URL.revokeObjectURL(url);
        }catch (e) {
          console.log('下载的文件出错',e)
        }
      }).catch(()=>{
        console.log('下载的文件出错')
      })  
 
参考：https://www.cnblogs.com/raymond-yan/p/10364120.html
 https://blog.csdn.net/clmmei_123/article/details/108105046

https://blog.csdn.net/qq_43477721/article/details/106100824
 
做登录或者注册的时候，会用到验证码，前端会接收后端发的验证码图片
 
 
就像这样的
 
<el-form-item label="验证码" prop="name">
  <el-input style="width: 147px;" v-model="ruleForm.verification" placeholder="请填写验证码"></el-input>
  <div class="verification">
    <img :src="this.verificationImg" alt="" @click="acquireVerification">
  </div>
</el-form-item>
 
data () {
  return {
    verificationImg: '',
    ruleForm: {
      verification: ''
    }
},

acquireVerification () {
	// {responseType: 'blob'} ，不加这个返回的就是乱码
    //直接获取
  axios.get('/api/verifyCode', {responseType: 'blob'}).then((response) => {
    console.log(response.data)
    this.verificationImg = window.URL.createObjectURL(response.data)
    console.log(this.verificationImg)
  })
    //加参数的
    axios({
      method: "get",
      url: "/purchase/captcha.jpg",
      params: {
        uuid:this.loginForm.uuid,
      },
      responseType: "blob",
    })
      .then(response => {
        console.log(response.data);
        this.verificationImg = window.URL.createObjectURL(response.data)
      })
      .catch(error => {
        console.log(error.data);
      });

      }
}


mounted () {
  this.acquireVerification()
}
 
 

处理后台返回流文件，多张图片处理，返回成一个压缩包
 
 处理方法：
 
 
 
let blob = new Blob([res.data], { type: 'application/octet-stream;charset=UTF-8' })
let fileName = decodeURI(res.headers['content-disposition'].split('filename*=utf-8')[1])
if (window.navigator.msSaveBlob) {
	// ie
    window.navigator.msSaveOrOpenBlob(blob, fileName)
     return
}
let elink = document.createElement('a')
elink.style.display = 'none'
elink.href = window.URL.createObjectURL(blob)
elink.download = fileName
document.body.appendChild(elink)
elink.click()
URL.revokeObjectURL(elink.href)
document.body.removeChild(elink)
 
 
就可以下载成一个压缩包了哦
 
单张图片下载（相当于浏览器下载）
 
 
this.$http.post( --接口名---, data, { responseType: 'arraybuffer' })
   .then(response => {
      return 'data:image/png;base64,' + btoa(new Uint8Array(response.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
    })
    .then(data => {
      var link = document.createElement('a')
      link.href = data
      if (imgsrc.indexOf('.jpg') != -1) { // 判断图片格式，非jpg格式，都已png格式显示
        link.download = name + '.jpg'
      } else {
        link.download = name
      }
      link.click()
    })
 

async getDataList() {
      const _res = await this.$http.put('total/export', {
        caseNumbers: ['cdx12', '131'],
        columns: this.codeCol,
      },{responseType: 'arraybuffer'})
      let blob = new Blob([_res.data], { type: 'application/vnd.ms-excel' })
      let objUrl = URL.createObjectURL(blob)
      const link = document.createElement('a')
      link.href = objUrl
      link.download = 'data.xlsx'
      link.click()
      URL.revokeObjectURL(objUrl)
    },