vue 接收后端文件流 并下载

在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