Vue - 详细实现下载后端接口返回的二进制文件流，前端下载后端接口返回的文件流并自动保存到本地，支持任何格式的文件下载（从后端拿到二进制文件流数据，前端实现点击下载功能）

已于 2024-02-02 15:23:40 修改
阅读量1w 收藏 15
点赞数 4
分类专栏： + Vue 文章标签： vue 下载二进制文件流教程 nuxt如何下载二进制文件流 调用服务端接口下载文件流示例
于 2021-12-08 09:50:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44198965/article/details/121783870
版权
+ Vue 专栏收录该内容
154 篇文章 1071 订阅 ¥9.90 ¥99.00
订阅专栏

前言

网上的教程都太乱了，本文提供优质示例代码。

在 vue2 / vue3 / nuxt 项目中，详细实现前端调用服务端接口下载二进制文件流文件，并保存下载到用户本地功能效果，在前端进行点击下载并保存到用户本地，任何格式的文件都可以轻松下载，

提供详细示例源码，一键复制改个接口即可使用。

在这里插入图片描述

准备工作

</

了解本专栏 订阅专栏 解锁全文
王佳斌
关注
  • 4
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
vue-以文件流-blob-的形式-下载-导出文件操作
10-14
主要介绍了vue-以文件流-blob-的形式-下载-导出文件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
【vue】将后端返回的二进制流前端进行处理实现下载文件
weixin_45184157的博客
07-15 4582
vue 项目，处理后端传过来的二进制流文件，实现下载功能
vue解析后端返回的二维码图片数据流
01-07
问题场景： 后端返回图片数据流，打印结果是乱码，如下： Chrome浏览器的preview中可以看到二维码（图片），如下： 解析思路： 尝试用二进制大对象Blob解析，然后生成图片的URL，代码如下： // QRCode 为后端接口返回的图片数据流 const blob = new Blob([QRCode]) const url = window.URL.createObjectURL(blob) 但是把生成的URL链入img的src后仍然显示不出来，在查资料后知道还需设置responseType为blob才行，代码如下： const QRCode = await this.$swag
vue中使用asiox下载后端响应在response中的文件流
最新发布
qq_45396650的博客
03-22 300
vue使用axios下载文件
vue接收文件流并下载
chuxuezhe__1的博客
03-31 3229
vue下载文件显示格式未知或数据已损坏，文件无法打开。
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
10-17
主要介绍了vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流),本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue文件流下载
weixin_48601618的博客
05-21 8051
作为一个前端渣渣,在经历了一段较长时间的超文本下载之后,突然后端发现需要使用文件流下载,在这里记录下文件流下载 由于是使用的vue-axios的项目,在请求的方式上有给予axios做了一个二次的封装,里面加了拦截器,所以在这里就要用回原来的axios Axios({ url: `xxx.xxx/api${getFile}`, //请求路径 responseType: "blob", //表明返回服务器返回的数据类型 method: "post", /
vue中下载文件，后端返回文件流，前端进行处理和文件下载以及遇到的坑
fangqi20170515的博客
06-25 1987
2、数据成功返回后，对数据进行处理。1、前端发起请求时的配置。例：返回的数据格式如下。
vue使用文件流进行下载
L_yvpeng的博客
12-08 1万+
在 Vue 项目中，经常会遇到下载文件流的情况，使用 new Blob二进制进行文件下载功能（vue后台返回文件流下载导出函数封装、调用示例），type不同下载的文件格式也不同，，可根据自己项目场景更换 new Blob() 的 type 即可。
Vue下载文件流
weixin_45336090的博客
10-24 1488
在实现下载功能时，如果后端返回的是文件流的数据，需要前端先转换成Blob对象，再进行下载 const requestConfig = { headers: { "responseType": "blob" //将二进制流转换成blob对象 } }; const params = new URLSearchParams(); params.append("fileName","文件名称"); axios.post("/download",params,requestConfig).then(res
vue请求接口返回文件流并进行下载
annier_11的博客
09-15 4235
vue项目，有两种方式实现请求接口返回文件流并进行下载： 第一种：使用a标签的特性，使用链接实现 第二种：下载文件流的方式
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
10-15
主要介绍了在vue中使用axios实现post方式获取二进制流下载文件的相关资料,需要的朋友可以参考下
Vue + antd组件 实现后端返回二进制流导出Excel模版与上传Excel模版给后端
01-03
下载模版 上传更新 methods: { beforeUpload(file) { let Res = this.checkedList.map((itemm, indexx) => { this.newJointObj.forEach((item, index) => { if (item[Object.keys(item)] === itemm) { this....
前端将浏览器端麦克风语音流传输给java后端
06-11
前端将浏览器端麦克风语音流传输给java后端
ruoyi_ant_design_pro:若依Vue SpringBoot版本的Ant Design Pro前端（本前端在不修改默认二进制情况下进行，完全可以直接下载前端与若依本机运行服务）
03-22
English || | || | | 蚂蚁设计专业版适用于企业应用程序的即用型UI解决方案，作为React样板。 预览： ： 主页： ： 文档： : 变更日志： : 常见问题解答： ： 中国镜像网站： ： 4.0现在发布！ :party_popper: :...
Vue - Ant Design Vue 中 ＜a-select＞ 选择器组件，既可以选择下拉又可以手动输入文本功能，让 select 选择器同时拥有下拉选择和输入文本（支持手动输入文本和下拉选择）
热门推荐
王佳斌
12-22 1万+
ant组件库的选择器怎么既能选，又能像文本框一样输入。antd-vue的select组件实现既可以输入添加,又可以下拉选择。antdesign select可输入可选择，既可以输入又可以选择得框，如何实现ant选择器能选择项目还能直接输入文本内容，ant-design-vue中的select选择器,对输入值的进行筛选操作 ，vue，ant design vue，select选择器，a-select，a-select实现可下拉选择和手动输入，element-plus组件库中选择器怎么像输入框一样可以输入，既可
Vue - 去掉控制台 Download the Vue Devtools extension for a better development experience: https://xxx 打印
王佳斌
07-06 1万+
前言 这不是报错也不是警告，仅仅是告诉开发者下载它可以获得更好的开发体验。 使用 vue-cli 创建项目启动后，发现控制台默认打印了如下信息： 但就是不想让它控制台打印？一步步关掉它！ ## 下载Vue Devtools扩展以获得更好的开发体验 Download the Vue Devtools extension for a better development experience: https://github.com/vuejs/vue-devtools 关闭打印 打开项目 node_mo
Vue - 详细实现先调用接口，然后再渲染数据，让页面 DOM 元素模板等待接口请求数据完毕后再进行渲染页面（先加载完所有数据再渲染页面）
王佳斌
01-13 1万+
效果图 文章末尾有代码示例及思路。 前言 如果你的数据是本地（data 直接定义），那么并不会发生任何问题，因为它们是同步的。 <template> <ul v-for="(item, index) in getData()" :key="index"> <li>{{ item.name }}</li> </ul> </template> getData() { api data ... } 由于模板（templat
Vue - 超详细 Element 组件库主题颜色进行 “统一全局“ 替换，将默认的蓝色主题色更换为其他自定义颜色（保姆级教程，简易且标准全局替换主题色）
王佳斌
07-06 1万+
vue element ui 实现更换主题颜色，vue怎么把element组件库的默认的蓝色主题改成其他颜色，vue element 组件库默认蓝色主题更换为其他颜色，vue更改element组件库主题色的超详细教程，vue 项目全局修改element-ui的样式/主题颜色，vue-element换肤所有主题色和基础色均可自主配置，vue中修改element plus 主题色，vue elementUI 主题颜色切换，vue中自定义element-ui组件库的主题颜色，vue使用element UI饿了么改
后端返回二进制文件流,前端vue实现在线预览
09-19
后端可以返回二进制文件流给前端，前端使用Vue框架可以实现在线预览这些文件。 首先，后端需要将文件以二进制流的形式返回给前端。可以使用一些常见的后端语言和框架，如Java的Spring Boot、Python的Django等。在后端，可以通过读取文件的字节数据，再将字节数据以流的形式返回给前端。 在前端，使用Vue框架可以方便地处理二进制文件流并实现在线预览。首先，前端需要获取到后端返回的文件流，在Vue的组件中通过调用后端的API接口获取文件的二进制数据。 获取到二进制数据后，可以使用FileReader对象将文件流转换成可读的文件对象。通过FileReader的readAsDataURL方法，可以将二进制数据转换成DataURL格式，这个格式可以直接在HTML的img标签中使用。 在Vue的模板中，可以使用<img>标签来展示转换后的DataURL格式的文件数据。设置这个标签的src属性为转换后的DataURL数据，就可以在页面上实时预览文件了。 需要注意的是，不同类型的文件可能需要使用不同的处理方式。例如，图片文件可以直接在<img>标签中展示，而音频文件和视频文件可能需要使用特定的播放器插件。根据不同的文件类型，选择合适的方式来实现在线预览。 总结来说，后端返回二进制文件流，前端Vue框架可以通过调用后端API接口获取文件数据，并通过FileReader将二进制数据转换成可读的文件对象，使用<img>标签或其他特定的插件进行在线预览。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王佳斌

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值