前后端分离，导出数据为文件或下载文件，前端如何处理后端返回的数据

最新推荐文章于 2024-06-13 10:06:49 发布
原创 最新推荐文章于 2024-06-13 10:06:49 发布 · 2.2k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

本文介绍了一种利用浏览器处理二进制文件流的方法，通过前端调用后端接口实现导出Word功能。具体步骤包括：使用encodeURI编码前端数组确保后端能正确接收，再通过window.open打开特定URL获取二进制文件流。

利用浏览器处理二进制文件流，之间用浏览器访问接口地址，代码如下：

var pathName=window.document.location.pathname;
var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
window.open(projectName+"/gen/autogen/generate?subMenuIds="+encodeURI(subMenuIds)+"&projectName="+vm.projectName);

需要注意subMenuIds是前端数组，需要编码后后端才能正常接收，vm.projectName为字符串

后端返回的是二进制文件流

https://www.cnblogs.com/sunshine6/p/8296945.html

前后端分离restful风格后端如何传文件给前端提供导出word功能

https://segmentfault.com/q/1010000013810978

前端导入导出文件(前后端不分离)
m0_74809043的博客
08-06 1126
前后端不分离，折线图 ，导入导出文件
前后端分离java中excel导出_(干货)前端实现导出excel的功能
weixin_34260080的博客
02-24 3793
前言导出功能其实在开发过程中是很常见的,平时我们做导出功能的时候基本都是后台生成，我们直接只需要调一支接口后台把生成的文件放到服务器或者数据库mongodb中,如果是放到mongodb中的话,我们需要从mongodb中通过唯一生成的id去拿到文件,最后window.location.href就完事了。如果是放到服务器上,直接从服务器上下载就好了。下面我们使用另一种 H5 的新特性blob[1]对象...
前后端分离开发，后端返回前端json数据
lzycug的博客
07-13 5374
现阶段越来越多的项目采用前后端的分离开发模式，前端请求后台接口获取数据，后台返回结果，这时我们往往会定义好一种固定的数据格式来实现数据的传递，下面就本人在开发中常用的数据对象来做简单说明 我们在开发中定义后台接口时，后台返回数据可以定义为Result<T>，其中泛型T根据接口获取的不同数据根据情况而定，其中code为请求接口的状态码，msg为该次请求结果的提示信息（code和msg可一一对应，封装为枚举对象），data为返回数据，具体的代码如下 package com.lzycug.mail.
后端返回文件流时，前端如何处理并成功下载流文件以及解决下载后打开显示不支持此文件格式
DongShanYuXiao的博客
05-13 1万+
上图类似于乱码，就是文件流在浏览器中的表现形式。
Vue实战【后端返回文件流时，前端如何处理并成功下载流文件】
商务合作/软件定制/学习交流
04-07 5600
Vue处理后端返回的文件流，并成功下载为文件
后台返回的文件流前端怎么导出
z_24kchun的博客
03-22 287
注意在接口的地方增加这个responseType: 'blob'时，前端需要做响应的处理才可以导出文件。
前端导出后端返回文件流
weixin_43456164的博客
07-11 482
1. 后端返回打印 leturl=window.URL.createObjectURL(res); letlink=document.createElement('a'); link.download='告警查询数据'; link.href=url; link.click();
前后端分离项目 后端Java查询数据库返回对象List<HqmsOutMedRecDetailVO> 导出csv文件，超过一万行数据时进行分文件，并返回给前端
03-24
好的，我现在要解决用户的问题：如何在后端Java中处理超过一万行的数据，分页查询数据库并将结果导出为多个CSV文件，然后提供给前端下载。用户提到了分页查询、导出CSV、分文件以及前后端分离的情况。我需要一步步理...
基于Vue框架实现Excel表格上传解析与数据交互的完整前后端分离项目-包含Excel文件上传解析数据采集与后台交互表格导出自动下载功能-用于学习Vue和Vue-Router实战应.zip
最新发布
08-20
本项目提供了一个完整的案例，展示如何实现一个复杂的数据处理流程，包括前端的文件上传、界面交互设计，后端的数据解析、存储和报表生成，以及前后端的数据交互和文件导出下载功能。这不仅有助于理解Vue和Vue-...
php实现前后端完全分离
qq_38989173的博客
07-07 7215
PHP实现前后端分离
前后台分离 + vue
12-27
前后端分离后台系统，vue+ elementUI 实现的前端渲染。
后端返回文件流，前端怎么导出、下载（8种方法可实现）
热门推荐
一步一个脚印，踏实努力，向着目标前进
08-26 3万+
这些方法可以根据具体的需求和项目环境选择使用。需要注意的是，后端返回的文件流需要正确设置Content-Disposition响应头，以指定文件的名称和下载方式。这些方法提供了多种选择来实现前端导出和下载后端返回的文件流。根据具体的需求和项目环境，选择适合的方法进行实现。
前端实现获取后端返回的文件流并下载
后端开发
06-13 4495
在前端开发中，有时需要从后端获取文件流，并将其下载到本地。本文介绍如何在前端实现此功能的不同的实现方法，并分析其优缺点。
SpringBoot接收前台传输的文件的两种方式
u013282737的博客
04-29 2万+
第一种：前台将文件转换成BASE64的字符串，后台接收BASE64的字符串并解码： 这种方式有一个问题，文件比较大的时候，后台可能会接收不了，推荐使用第二种方式。 @SuppressWarnings("restriction") @RequestMapping(value = "/uploadImageBase64", method = RequestMethod.POST) publ...
前端对后端返回文件流及文件名称进行处理&node编写本地测试服务返回文件流
月色真美121的博客
06-15 1988
下载 npm install express body-parser cors 几个工具包。一般文件流的接口后端会在请求上加一个fileName是转义后的中文。npm init 初始化一个package.json文件。接下来是下载方法 注意fileName這个字段。前端需要在请求拦截器处理一下這个请求。对后端的文件接口做额外处理。首先搭建基本项目工程。
前端处理后端返回的File数据
m0_64562972的博客
02-19 2160
前端处理后端返回的File数据，vue接受后端返回的文件流
前端接受后端文件流并下载的几种方法
qq_42957435的博客
10-18 1万+
项目中经常会遇到需要导出列表内容，或者下载文件之类的需求。结合各种情况，我总结了前端最常用的三种方法来接受后端传过来的文件流并下载，针对不同的情况可以使用不同的方法。 首先是后端将文件转换成byte数组 /** * 将文件转换成byte数组 * @param filePath 文件File类 通过new File(文件路径) * @return byte数组 */ public static byte[] File2byte(File filePath).
前端下载（导出）功能实现
weixin_30404405的博客
04-16 478
1、a标签（download属性【HTML5】）下载 <a href="/api/getImg" download="file.xlsx">下载</a> download：此属性指示浏览器下载 URL 而不是导航到它，因此将提示用户将其保存为本地文件。如果属性有一个值，那么此值将在下载保存过程中作为预填充的文件名（如果用户需要，仍然可以更改文件名）。此属性对允许...
手把手教你前后端分离
三横同学的博客
11-22 7675
手把手教你搭建前后端分离项目 1.Vue下载安装具体教程 [https://www.pianshen.com/article/56021694732/]: 技术标签： vue vue.js node.js 对于我这种小白来说，安装个vue全局就绕了好几天。查阅API和不少vue全局安装的文档，各种尝试各种失败。使用webStorm创建vue项目时还是显示各种vue-cli的错误。终于这篇文章拯救了我，成功安装上了vue-cli，可以通过CLI来创建vue了！激动 链接附上： 我看的文章：https://ww
若依前后端分离 组合数据返回文件流
03-19
### 若依前后端分离架构中实现组合数据并通过文件流返回 在若依前后端分离的架构中，要实现组合数据并以文件流的形式返回给前端，通常涉及以下几个方面： #### 1. **后端数据处理** 在后台的数据处理阶段，需要先完成业务逻辑操作并将所需数据进行整理和组合。假设我们需要将多个表中的数据提取出来，并将其转换为适合导出的格式。 使用 Java 的 `OutputStream` 或者其他类似的类来构建文件流响应。以下是具体代码示例： ```java import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RestController; import javax.servlet.http.HttpServletResponse; import java.io.*; import java.util.List; @RestController public class DataExportController { @GetMapping("/exportData") public void exportData(HttpServletResponse response) throws IOException { // 设置 HTTP 响应头信息 response.setContentType("application/octet-stream"); response.setHeader("Content-Disposition", "attachment;filename=data.csv"); // 组合后的数据列表 (模拟) List<String> dataList = getDataList(); try (BufferedWriter writer = new BufferedWriter(new OutputStreamWriter(response.getOutputStream()))) { for (String data : dataList) { writer.write(data); writer.newLine(); } } catch (IOException e) { throw new RuntimeException(e.getMessage()); } } private List<String> getDataList() { // 此处调用服务层方法获取实际数据 return List.of("Row1,ValueA", "Row2,ValueB"); } } ``` 上述代码实现了通过 GET 请求 `/exportData` 接口下载 CSV 文件的功能[^4]。 --- #### 2. **前段请求接口** 在前端部分，可以通过 Axios 库发起请求并接收文件流。以下是一个 Vue.js 中的例子： ```javascript methods: { downloadFile() { axios({ url: '/api/exportData', // 对应后端接口地址 method: 'GET', responseType: 'blob' // 表明服务器会返回二进制数据 }).then((response) => { const blob = new Blob([response.data], { type: 'text/csv;charset=utf-8;' }); const linkElement = document.createElement('a'); const href = URL.createObjectURL(blob); // 创建临时链接 linkElement.href = href; linkElement.download = "data.csv"; // 下载文件名 document.body.appendChild(linkElement); linkElement.click(); // 自动触发点击事件 document.body.removeChild(linkElement); // 清理创建的 DOM 元素 window.URL.revokeObjectURL(href); // 释放对象 URL }); } } ``` 此代码片段展示了如何从前端向后端发送请求以及保存接收到的文件流作为本地文件[^5]。 --- #### 3. **动态菜单配置与文件路径设置** 动态菜单由后端传递 JSON 数据至前端渲染而成。这涉及到 Sidebar 文件夹下的 index.js 配置项[v-for 循环绑定][^1]。而关于上传路径，则需关注 Profile 节点定义的位置及其默认值设定[^2]。 当调整项目名称或者模块描述等内容时，除了更改前端显示文字外还需要同步更新 Java 工程内的字符串资源[^3]。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值