vue.js接收并下载文件流(blob对象)

  在vue框架中,与传统的根据路径下载文件(document.getElementById("").src=‘’)方式不同,有时候,我们会需要将上传的文件在后台直接进行处理再回传到前端,这种情况下文件没有实际的可获取的路径,无法通过链接方式下载。但是可以通过将其转成blob对象,添加到iframe标签中来模拟下载(或者pdf预览)。具体的接收方式如下

1.首先设置responseType对象格式为 blob:

  responseType:'blob'

2.获取请求返回的response对象中的blob

  var blob=response.body

3.创建一个临时的url指向blob对象

   #URL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL. 这个URL的生命仅存在于它被创建的这个文档里. 新的对象URL指向执行的File对象或者是Blob对象.

 var url = window.URL.createObjectURL(blob);
 #设置文件类型,这里以excel为例
blob.type = "application/excel";
 #创建url之后可以模拟对此文件对象的一系列操作,例如:预览、下载
 var a = document.createElement('a');
 a.href = url;
 a.download = 'test.xlsx';
 a.click();
 

4.释放这个临时的对象url

  window.URL.revokeObjectURL(url);

  #URL.revokeObjectURL()方法会释放一个通过URL.createObjectURL()创建的对象URL. 当你要已经用过了这个对象URL,然后要让浏览器知道这个URL已经不再需要指向对应的文件的时候,就需要调用这个方法.

posted @ 2019-02-12 10:14  一杆梅子酒白衣返北凉  阅读(29440)  评论(0编辑  收藏  举报