vue中后端返回文件流( type “applicationoctet-stream“ )的形式,前端进行处理和文件下载,以及自定生成对应的文件类型
工作中用到,记录一下
前端对于返回数据的处理
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 )
}
顺利调用,就能下载成功!!!!!
原文链接:https://blog.csdn.net/web13595813953/article/details/123054351
分类:
91vue.js
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· 葡萄城 AI 搜索升级:DeepSeek 加持,客户体验更智能
· 什么是nginx的强缓存和协商缓存
· 一文读懂知识蒸馏
2020-07-01 试题批量录入的逻辑是怎样的?