vue前端axios下载文件教程，接收后端返回的二进制流处理并下载

web前端下载文件，接收后端返回的二进制流并下载

一般情况下，前端下载文件，后端会返回二进制流文件给我们

HTML代码：给按钮绑定点击事件

<el-form-item label="下载附件">
	<el-button @click="downBtn" type="primary">下载</el-button>
</el-form-item>

后端接口文档

请求方式：get
接口地址：/download
请求参数：path: ‘xxx.jpg’

Js代码

downBtn(){
   axios({
		//此处对应填写后端规定的分请求方式get
        method: 'GET',
        //此处填写后端规定的接口地址
        url: '/download’,
        params: {
        	//此处填写后端规定的请求参数
            path: 'xxx.jpg'
        },
        //此处规定请求成功返回的是流形式文件
        responseType: 'blob'
    }).then(res => {
        if(res.data.response_code == 500){
        	//后端返回值为500，请求失败，提醒用户
        	//res.data.response_message为后端返回的失败信息
        	alert("res.data.response_message")
        }else{
        	//请求成功，返回的数据
            const blob = new Blob([res.data], { type: res.data.type })
            //判断返回的文件是否为空文件
            if(blob.size!=0){
            	//生成一个a连接
                let tag = document.createElement( "a" );
                //将返回的数据生成url赋值给a链接
                tag.href = URL.createObjectURL( blob );
                //此处规定要下载的文件名称，带文件后缀，要不然可能下载出错
                tag.download = 'xxx.jpg';
                //模拟按钮点击下载
                tag.click();
                //下载后释放url对象
                URL.revokeObjectURL( tag.href );
            }else{
            	alert("未请求到数据,请联系管理员!")
            }
        }
    })
    .catch((rej) => {
        console.log(rej)
    });
},

此方法也可以下载其他类型的文件
如有写的不清楚的可评论私信联系我，欢迎指教