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对象

后缀名 MIME名称
*.3gpp audio/3gpp, video/3gpp
*.ac3 audio/ac3
*.asf allpication/vnd.ms-asf
*.au audio/basic
*.css text/css
*.csv text/csv
*.doc application/msword
*.dot application/msword
*.dtd application/xml-dtd
*.dwg image/vnd.dwg
*.dxf image/vnd.dxf
*.gif image/gif
*.htm text/html
*.html text/html
*.jp2 image/jp2
*.jpe image/jpeg
*.jpeg image/jpeg
*.jpg image/jpeg
*.js text/javascript, application/javascript
*.json application/json
*.mp2 audio/mpeg, video/mpeg
*.mp3 audio/mpeg
*.mp4 audio/mp4, video/mp4
*.mpeg video/mpeg
*.mpg video/mpeg
*.mpp application/vnd.ms-project
*.ogg application/ogg, audio/ogg
*.pdf application/pdf
*.png image/png
*.pot application/vnd.ms-powerpoint
*.pps application/vnd.ms-powerpoint
*.ppt application/vnd.ms-powerpoint
*.rtf application/rtf, text/rtf
*.svf image/vnd.svf
*.tif image/tiff
*.tiff image/tiff
*.txt text/plain
*.wdb application/vnd.ms-works
*.wps application/vnd.ms-works
*.xhtml application/xhtml+xml
*.xlc application/vnd.ms-excel
*.xlm application/vnd.ms-excel
*.xls application/vnd.ms-excel
*.xlt application/vnd.ms-excel
*.xlw application/vnd.ms-excel
*.xml text/xml, application/xml
*.zip aplication/zip

*.xlsx application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

代码如下:

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);
 
},