axios获取文件流，让iframe读取

axios默认的返回类型是json数据，如果请求回来的数据不是json格式的，也会自动转成json格式，而有时候我们不希望它转成json格式的数据，这时就能通过改变responseType属性来把返回值设置成自己想要的格式，例如后台返回一个pdf文件流，用iframe请求的时候能直接通过src读取到，

<iframe :src="url" width="100%" height="600px" ></iframe>

但是我们需要在请求的时候携带token请求头，这时就不能通过src直接读取到pdf文件了，需要通过axios携带token来发起请求，把返回值赋值给iframe这样才能让iframe读取到该pdf文件，而正如上文所言，axios会把返回值自动转成json格式，所以需要用responseType把返回值格式设成"arraybuffer"，然后通过btoa把返回值转成iframe能直接读取的格式，

async getPdf(url){
	let data =await  axios.get(url,{
	     headers: {
	         "Authorization": 'Bearer ' + token
	     },
	     responseType: 'arraybuffer', 
	 })

	this.url = "data:Application/pdf;base64," + btoa(
                            new Uint8Array(data.data)
                                .reduce((data, byte) => data +String.fromCharCode(byte), '')
                        );
}

"data:Application/pdf;base64,"这段是不能省略的，如果返回的是图片的能用Application/x-jpg，具体能根据返回的是什么文件类型来设置。
这样就能直接把this.url赋值给iframe的src了。

通过这种方式获取的this.url有一个问题就是转成的地址可能会很长，而iframe的默认提交方式是get，get提交在浏览器中最大限制在2k以内，超过2k就终止跳转，所以我们可以尝试通过另一种方式。

那就是把base64数据转成blob对象，然后再通过URL.createObjectURL(blob)来生成能被iframe读取的url地址。

async getPdf(url){
	let data =await  axios.get(url,{
	     headers: {
	         "Authorization": 'Bearer ' + token
	     },
	     responseType: 'arraybuffer', 
	     
	 })
	 let blob = new Blob([data.data],{type:data.headers["content-type"]}); 
	 this.url = URL.createObjectURL(blob);
}

小萌新一个，如果有错或者改进的地方，欢迎在评论区讨论！