vue中axios实现二进制流文件下载

后端传过来的是一个二进制流方式的docx文件

之前试了下网上常见的思路,  这类方法思路如下:

1. 使用js在页面常见a标签

2. 创建Blob对象, 在Blob中传入后端返回的response.data

   这一步中Blob需要的是一个数组类型的参数, 后端二进制流这边接收到的response.data使用查看发现是String, 所以我把response.data放进一个长度1的数组, 再传入Blob对象,

   此外需要规定文件类型, 可以是doc的(这里传的word文档)application/vnd.openxmlformats-officedocument.wordprocessingml.document, 也可以是二进制流的application/actet-stream

3. 创建下载链接 window.URL.createObjectURLblob()

4. 把3创建的链接变量赋值个a标签的href属性(这类用法详见a标签文档)

5. 使用document.body.appendChild把a标签挂上去, 再调用a标签的.click()事件

6. document.body.removeChild(a标签) 移除a标签

7.window.URL.revokeObjectUR()下载链接)释放blob对象

代码如下:

download(){
    this.$http({
        method:"get",
        url:接口地址+"?data="+encodeURI(JSON.stringify(this.value)),
        responseType:'blob'
        }).then((res)=>{
        //这里res.data是返回的blob对象
        var blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8'}); //application/vnd.openxmlformats-officedocument.wordprocessingml.document这里表示doc类型
         var contentDisposition = res.headers['content-disposition'];  //从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;
        var patt = new RegExp("filename=([^;]+\\.[^\\.;]+);*");
        var result = patt.exec(contentDisposition);
        var filename = result[1];
        var downloadElement = document.createElement('a');
        var href = window.URL.createObjectURL(blob); //创建下载的链接
        downloadElement.style.display = 'none';
        downloadElement.href = href;
        downloadElement.download =filename ; //下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        document.body.removeChild(downloadElement); //下载完成移除元素
        window.URL.revokeObjectURL(href); //释放掉blob对象
        })
}

post方式的代码如下:

download(){
        this.$http({
          method:"post",
          url: 接口url,
          data:JSON.stringify(this.value),
          responseType:'blob',
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'    //后端ssm框架接收json类型
          }
        }).then((res)=>{
        //这里res.data是返回的blob对象
        var blob = new Blob([res.data], {type: 'application/actet-stream;charset=utf-8'});
        var contentDisposition = res.headers['content-disposition'];  //从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;
        var patt = new RegExp("filename=([^;]+\\.[^\\.;]+);*");
        var result = patt.exec(contentDisposition);
        var filename = result[1];
        var downloadElement = document.createElement('a');
        var href = window.URL.createObjectURL(blob); //创建下载的链接
        downloadElement.style.display = 'none';
        downloadElement.href = href;
        downloadElement.download =filename ; //下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        document.body.removeChild(downloadElement); //下载完成移除元素
        window.URL.revokeObjectURL(href); //释放掉blob对象
        })
    },

 

另一种使用简单粗暴的方法完成下载, 直接打开新窗口, 用get方式传递参数完成下载:

download(){

    var url = 接口地址;

    url = url+"?data="+encodeURI(JSON.stringify(this.data));  //get方式要encode一下, 后端接收参数data

    window.open(url);

},