axios接收后台响应的二进制文件

最新推荐文章于 2024-08-11 03:28:11 发布

yux816

最新推荐文章于 2024-08-11 03:28:11 发布

阅读量1.8k

点赞数 3

分类专栏： axios 文章标签： javascript

本文链接：https://blog.csdn.net/Mr_yu816/article/details/108974063

版权

本文介绍了如何通过axios发送请求，并设置响应类型为二进制，以及在前端接收到二进制文件后将其转换为Blob对象进行处理。

摘要由CSDN通过智能技术生成

1、发送请求的时候，把响应类型responseType的值修改为blob

	axios({
 		url: 'xxxx',                                       // 请求路径
 		method: 'post',								       // 请求方式
  		data: {
    		id:  0                                         // 传给后台的参数
  		},
  		responseType: 'blob',                              // 响应类型修改为blob（默认是json）
	}).then(res => {
  		console.log('请求结果：', res);
	});

2、前端接受响应的时候，将获取到的二进制文件转成blob格式

getDataUrl().then(res => {
	// res是后台返回的数据
	// 文件名一般由后台拼接放到响应头：res.header['content-disposition']，需要手动剪切
	// 二进制文件：rea.data.data
	var blob = new Blob(
        [res.data.data],                          // 将获取到的二进制文件转成blob
       {type: 'charset=utf-8'}					  // 有时候打开文档会出现乱码，设置一下字符编码 
    ); 
    // 转成文件流之后，可以通过模拟点击实现下载效果
    var element = document.createElement('a