Vue接收后端POST、GET返回的zip文件流打开报异常

奋斗者ing

于 2024-05-08 14:53:36 发布

阅读量343

点赞数 4

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/liaonanfeng88/article/details/138571855

版权

近期接到一个小任务是将内容导出为 Zip 文件流的行式给前端 Vue 供用户下载；过程中发现一个问题打开 zip 文件报异常，如下：

首先后端这块单独在服务端请求是落盘的文件是正常的；因此后端的这块的逻辑没有问题；但中间前端比较忙活，就又折腾后端的处理方式；最后还是无果放弃了；拉的前端对比之前下载的代码，发现新的功能是前端自已的；过程中有个关键的流请求项

responseType: 'blob', // Vue 请求接口时，需要在请求头里设置这是关键，用于接收二进制流

最终文件打开了；苦的一逼，能说啥呢；~~~~~~~~~~~~~~

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

奋斗者ing

关注关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue接收后端POST、GET返回的zip文件流打开报异常

近期接到一个小任务是将内容导出为 Zip 文件流的行式给前端 Vue 供用户下载；过程中发现一个问题打开 zip 文件报异常
复制链接

扫一扫

前端基于vue，后端基于springboot和hdfs的云盘项目.zip

03-20

6. **文件操作API**：后端需要设计一套文件操作API，如GET请求获取文件列表，POST请求上传文件，PUT请求更新文件，DELETE请求删除文件。这些API需要与HDFS接口对接，执行实际的文件操作。 7. **身份验证和授权**：...

图书管理系统,前端用的vue,后端用的springboot.zip

02-04

例如，可以定义一个`/books`接口，接收GET请求获取所有图书信息，POST请求添加新图书。同时，SpringBoot集成了Spring Data JPA，使得与数据库的交互变得更加简单。我们可以定义实体类`Book`，并使用JPA的Repository...

参与评论您还未登录，请先登录后发表或查看评论

关于前台封装实现zip文件流的下载功能并如何使用

bigpatten的博客

05-14

2864

前台封装 zip 文件流的下载并如何使用在前端开发过程中有关于文件下载的基本是后台返回文件地址指向的 url ，前端通过 window.open 进行下载，但是对于后台返回 zip 文件流如何进行下载呢？接下来来看看如何实现。 1. 后台返回 zip文件流 2. 前台使用axios请求后台接口获取zip文件流请求前的准备 axios的 responseType 设置为blob 将返回的zip文件流转换为blob对象解析，并指定type为：“application/zip;charset-UTF

vue-以文件流-blob-的形式-下载-导出文件操作

10-14

主要介绍了vue-以文件流-blob-的形式-下载-导出文件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue中实现PDF文件流预览

明思齐的博客

12-15

2614

在展示预览之前，先将数据转换成json格式，如果转换过程中出现异常，则显示错误消息并清空文件预览区域；如果转换成功，则进行具体的展示逻辑。是在关闭文件预览时，清空预览区域的内容，以便下次预览文件时重新加载新的内容。showPdfPreview()方法，用于展示PDF文件的预览，并对异常情况进行处理。Blob 类型的数据转化为 JSON 对象。clearBox() 方法的作用。读取 Blob 类型的数据。这段代码我定义了一个。

vue下载文件流，文档打开只有[object Blob]（排错）

weixin_43939111的博客

12-18

1236

2、请求接口拿到的数据路径是否正确：比如接口返回的文件流数据在res.data下，而你只写了res（1、请求后端接口时前端api是否。），这样当然找不到啦。

vue2下载请求后端流格式显示无法打开文件解决方案

weixin_63515766的博客

10-14

2257

vue2下载请求后端流格式显示无法打开文件解决方案

vue 请求word文档流并打印预览

weixin_40466351的博客

07-12

6969

vue 请求word文档流并打印预览

集思笑话，含Vue.js后端，点赞.zip

01-10

【集思笑话，含Vue.js后端，点赞.zip】是一个包含微信小程序开发案例的压缩包，主要用于教学和项目实践，适合于毕设或课设的学习。这个案例涉及到多个IT技术领域，包括前端的微信小程序开发、后端的Vue.js框架应用，...

基于Golang和Vue的文件管理系统源码.zip

05-27

例如，GET /files用于获取文件列表，POST /upload接收文件上传，DELETE /files/:id删除指定文件等。API的设计应遵循统一的规范，便于前后端交互。 **数据库集成** 通常，文件管理系统会存储文件元数据，如文件名、...

vue_api_server.zip

06-29

"Vue_api_server.zip" 提供的是一个使用Vue全家桶技术栈开发的电商管理系统后端接口。Vue全家桶通常包括Vue.js核心库、Vuex状态管理器、Vue Router路由管理和Element-UI组件库。 Vue.js 提供了丰富的API和指令，如v...

vue后端管理系统-基于koa2服务端实现的vue后台管理系统.zip

04-04

1. **路由设置**：使用 Koa2 的 Router 中间件定义 API 路由，处理 GET、POST 等请求。 2. **数据库操作**：与 MongoDB、MySQL 等数据库集成，使用 ORM（如 Sequelize 或 Mongoose）进行数据操作。 3. **错误处理*...

前后端分离的博客系统，前端Vue3，后端Django4.zip

03-03

这是一个基于前后端分离架构的博客系统项目，使用了最新的Vue3作为前端框架，以及Django4作为后端的Web开发框架。这样的组合旨在提供高效、响应式的用户界面和强大的后台管理功能。首先，Vue3是JavaScript的一个...

集思笑话，含Vue.js后端，点赞 (2).zip

01-10

【集思笑话，含Vue.js后端，点赞 (2).zip】这个压缩包文件是一个包含微信小程序案例的项目，主要用于教学目的，适用于毕设或课设的学习。此案例重点展示了如何利用Vue.js作为后端技术和微信小程序进行集成，实现点赞...

springboot整合vue实现上传下载文件

08-25

"SpringBoot整合Vue实现上传下载文件" SpringBoot是一款流行的Java框架，Vue是一款流行的前端框架。在实际开发中，我们经常需要实现文件的上传和下载操作。今天，我们将详细介绍如何使用SpringBoot整合Vue实现上传...

VUE 后台传回zip文件流前台下载

晚秋的专栏

06-16

2198

后端返回的类型为 application/octet-stream 首先前端设置 axios里面要设置一个responseType为blob

vue中获取文件二进制流并在新的标签页打开

qq_41838435的博客

04-18

1338

后端返回下载文件的接口，返回的都是二进制流，不确定的可以看下下载响应表头的Content-Type是否是application/octet-stream。

vue的 blob文件下载文件时，后端自定义异常，并返回json错误提示信息，前端捕获信息并展示给用户

最新发布

wangwei的博客

04-07

942

3.问题出现的原因是，正常其他数据列表接口，返回的请求头部直接为 json ,有附件的则为 blob,所以得特殊处理下。4.解决方案，（注意：就是它： response.config.responseType=='blob'）2.vue 请求后台接口返回的 Blob数据。

vue3 后端返回pdf文件流前端预览

08-18

在Vue 3中，可以通过以下步骤实现后端返回的PDF文件流在前端进行预览： 1. 创建一个用于显示PDF的组件。可以使用现成的第三方库，例如`vue2-pdf-viewer`或者`vue-pdf`，也可以自己实现一个简单的组件。 2. 在Vue组件中引入后端返回的PDF文件流。通常情况下，可以通过发送HTTP请求到后端来获取PDF文件流数据。 3. 在发送HTTP请求时，确保设置正确的response类型为`arraybuffer`，以确保能够正确处理二进制数据。 4. 使用JavaScript中的Blob对象创建一个URL，将PDF文件流转换为URL地址。 5. 将转换后的URL地址传递给PDF预览组件来展示PDF内容。以下是一个简单的示例代码： ```javascript <template> <div> <pdf-viewer :src="pdfUrl"></pdf-viewer> </div> </template> <script> import axios from 'axios'; export default { data() { return { pdfUrl: null }; }, mounted() { axios.get('your-backend-api-url', { responseType: 'arraybuffer' }).then(response => { const blob = new Blob([response.data], { type: 'application/pdf' }); this.pdfUrl = URL.createObjectURL(blob); }); } }; </script> ``` 在上述示例中，通过发送GET请求到指定的后端API获取PDF文件流数据。然后，使用`Blob`对象创建URL地址，并将其赋值给组件中的`pdfUrl`变量。最后，将该变量传递给PDF预览组件进行渲染，从而实现PDF文件流在前端的预览。

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

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交