vue中后端返回文件流（ type “applicationoctet-stream“ ）的形式，前端进行处理和文件下载，以及自定生成对应的文件类型

m0_67403143

于 2022-03-09 10:47:39 发布

阅读量506

点赞数

分类专栏：前端 html 文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/m0_67403143/article/details/123371789

版权

前端同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

html

33 篇文章 0 订阅

订阅专栏

这篇博客介绍了前端如何处理接口返回的Blob数据，并实现文件下载功能。在Vue项目中，利用Ant Design Vue的a-table，通过作用域插槽获取文件名，然后将Blob数据转换为URL，创建a标签并触发点击事件来下载文件。

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

工作中用到，记录一下

前端对于返回数据的处理
1.对于请求的配置

{
url: ‘xxxx’,
mothod: ‘post’,
data: params,
responseType: ‘blob’
}

调用接口后返回的结果如下 : Blob(733347) { size: 733347, type: “application/octet-stream” }
2.下载函数
简单说明一下我应用的场景，vue使用ant 框架，对应的是a-table的操作列下载按钮这里利用作用域插槽得到每行数据对应的文件名称，下面的filename就是这样来的，带有相应的后缀比如：家电行业报告模板下载.doc
传入两个参数

downfiles ( datas, filename ) {
	var data  = new Blob( [ datas ] )
	console.log( data )
	var downloadUrl = window.URL.createObjectURL(data)
	var anchor = document.createElement( 'a' )
	anchor.href = downloadUrl
	// 这里的filename 带有后缀，能决定文件的类型
	anchor.downolad =  filename
	anchor.click()
	window.URL.revokeObjectURL( data )
}

顺利调用，就能下载成功！！！！！