post 文件下载二进制流

downLoadReport({

        id:'9003'

      },{responseType:'blob'}).then((res) => {

        let data = res.data

        let url = window.URL.createObjectURL(new Blob([data]))

        let link = document.createElement('a')

        link.style.display = 'none'

        link.href = url

        link.setAttribute('download', 'test.rar')

        document.body.appendChild(link)

        link.click()

      })

 

handleClick(str){

      downLoadReport({

        id:str.id

      },{responseType:'blob'}).then((response) => {

        // debugger

        // let data = res.data

        // let url = window.URL.createObjectURL(new Blob([data]))

        // let link = document.createElement('a')

        // link.style.display = 'none'

        // link.href = url

        // link.setAttribute('download', 'test.rar')

        // document.body.appendChild(link)

        // link.click()

        var blob = new Blob([response], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'});

        var downloadElement = document.createElement('a');

        var href = window.URL.createObjectURL(blob); // 创建下载的链接

        downloadElement.href = href;

        downloadElement.download = 'xx'+'.pdf'; // 下载后文件名

        document.body.appendChild(downloadElement);

        downloadElement.click(); // 点击下载

        document.body.removeChild(downloadElement); // 下载完成移除元素

        window.URL.revokeObjectURL(href); // 释放掉blob对象

      })

    },

 

 

handleClick(str){

      downLoadReport({

        id:str.id

      },{responseType:'blob'}).then((response) => {

        // debugger

        // let data = res.data

        // let url = window.URL.createObjectURL(new Blob([data]))

        // let link = document.createElement('a')

        // link.style.display = 'none'

        // link.href = url

        // link.setAttribute('download', 'test.rar')

        // document.body.appendChild(link)

        // link.click()

        var blob = new Blob([response], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'});

        var downloadElement = document.createElement('a');

        var href = window.URL.createObjectURL(blob); // 创建下载的链接

        downloadElement.href = href;

        downloadElement.download = '表格'+'.xlsx'; // 下载后文件名

        document.body.appendChild(downloadElement);

        downloadElement.click(); // 点击下载

        document.body.removeChild(downloadElement); // 下载完成移除元素

        window.URL.revokeObjectURL(href); // 释放掉blob对象

      })

    },

{type: 'application/pdf'}

 

 

 

Axios.post(url, {/*传入的参数*/}, { responseType: 'blob'} /*设置返回值的类型，这里设置文件流blob的形式*/)
.then(res => {
let blob = new Blob([res.data], {
type: 'application/xlsx;charset=utf-8'/*application/xlsx // 这里写要下载的文件格式;charset=utf-8*/
});
// 获取后端返回的文件名 --> 后端配合response.setHeader("Content-disposition", "attachment; filename=xxxx.xlsx") 设置的文件名
// 注意: 有时候axios返回的res.headers里面可能不包含content-disposition字段
//这是因为默认情况下，header只会暴露Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma这6个字段
// 此时需要后端设置response.setHeader("Access-Control-Expose-Headers", "Content-Disposition")将content-disposition字段暴露出去
let fileName = res.headers['content-disposition'].split(';')[1];
fileName = decodeURI(fileName).substring(9)
let eleLink = document.createElement('a');
// eleLink.download = '模板.xlsx' // 这里写的是下载文件的名称
eleLink.download = fileName // 这里是后端返回的文件名称
eleLink.style.display = 'none';
// 字符内容转变成blob地址
// URL.createObjectURL(blob)会创建URL对象，返回一个下载文件的地址
eleLink.href = URL.createObjectURL(blob);
// 触发点击
document.body.appendChild(eleLink);
eleLink.click();
// 释放URL对象
URL.revokeObjectURL(eleLink.href)
// 然后移除
document.body.removeChild(eleLink);
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
Axios.get(url, { params: {}, responseType: 'blob' }).then(res => {
let blob = new Blob([res.data], {
type: 'application/xlsx;charset=utf-8'
});
// 获取后端返回的文件名 --> 后端配合response.setHeader("Content-disposition", "attachment; filename=xxxx.xlsx") 设置的文件名
// 注意: 有时候axios返回的res.headers里面可能不包含content-disposition字段
//这是因为默认情况下，header只会暴露Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma这6个字段
// 此时需要后端设置response.setHeader("Access-Control-Expose-Headers", "Content-Disposition")将content-disposition字段暴露出去
let fileName = res.headers['content-disposition'].split(';')[1];
fileName = decodeURI(fileName).substring(9)
let eleLink = document.createElement('a');
// eleLink.download = '模板.xlsx' // 这里写的是下载文件的名称
eleLink.download = fileName // 这里是后端返回的文件名称
eleLink.style.display = 'none';
// 字符内容转变成blob地址
eleLink.href = URL.createObjectURL(blob);
// 触发点击
document.body.appendChild(eleLink);
eleLink.click();
// 然后移除
URL.revokeObjectURL(eleLink.href)
document.body.removeChild(eleLink);
})

vue对后台返回的二进制流进行下载（vue+axios）

1.设置axios的数据返回类型为blob

responseType:“blob”

2.接收后台返回的二进制流数据res

            var blob = new Blob([res.data]); //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];
              if (window.navigator.msSaveOrOpenBlob) {
             	 //兼容ie
                navigator.msSaveBlob(blob, filename);
              } else {
              	var downloadElement = document.createElement("a");
              	var href = window.URL.createObjectURL(blob); //创建下载的链接
              	var reg = /^["](.*)["]$/g;
              	downloadElement.style.display = "none";
              	downloadElement.href = href;
              	downloadElement.download = decodeURI(filename.replace(reg, "$1")); //下载后文件名
             	 document.body.appendChild(downloadElement);
              	downloadElement.click(); //点击下载
              	document.body.removeChild(downloadElement); //下载完成移除元素
             	 window.URL.revokeObjectURL(href); //释放掉blob对象
              }