axios 二进制文件流的导出下载功能

文件导出，一般都是后台整合导出业务，最终给到前台一个URL，但是有时候会遇到二进制流。如下图，后台返回的是二进制流数据

 

1、应该在你的Axios中设置一下 【responseType: 'blob' // 表明返回服务器返回的数据类型】

2、并且下载的时候要封装成Blob类型:

const link = document.createElement('a');
let blob = new Blob([data], {
  type: 'application/vnd.ms-excel'
});
link.style.display = 'none';
link.href = URL.createObjectURL(blob);

 

注：方法中用到的组件有moment.js    axios.js自行引入和组封装即可，项目没用到cli脚手架，仅供参照

handleExport() {
	//导出
	let _this = this
	_this.$http({
	method: 'post',
    url: 'your url', // 请求地址
	data: {},
	responseType: 'blob' // 表明返回服务器返回的数据类型
	})
	.then(function(response) {
	    if (response.data != undefined) {
		    _this.$com.downloadFile(response.data, "资产产品明细");
		}

	})
}

//下载方法
this.downloadFile = function(data, fileName) {
		let _that = this
		if (!data) {
			return
		}

        //注意，下方是自动创建a标签，并且要将二进制流数据转成blob类型，最终形成url下载地址
		const link = document.createElement('a');

		let blob = new Blob([data], {
			type: 'application/vnd.ms-excel'
		});
		link.style.display = 'none';

		link.href = URL.createObjectURL(blob);//形成url下载地址

        //指定文件名
		if (fileName == undefined) {
            //moment.js 指定文件下载时间
			fileName = moment().format('YYYY-MM-DD HH:mm:ss')
		}
        
        //封装文件名，并且自动下载
		link.setAttribute('download', fileName + moment().format('YYYY-MM-DD HH:mm:ss') + '.xlsx');
		document.body.appendChild(link);
		link.click();
		document.body.removeChild(link);
	}	

封装的http.js