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

简介:   在前后端分离的项目中涉及跨域问题,通常都会使用token进行验证。  最近在前后端分离的项目中在一个问题上搞了很久,就是以前下载附件或者导出数据为文件的时候,在以前的那些项目前端可以直接用 window.location.href='后端url',window.open(url)或者其他的方式,但是在前后端分离中这种方式不能把token也一起传到后端进行请求,导致权限不够访问不了后端。

  在前后端分离的项目中涉及跨域问题,通常都会使用token进行验证。

  最近在前后端分离的项目中在一个问题上搞了很久,就是以前下载附件或者导出数据为文件的时候,在以前的那些项目前端可以直接用 window.location.href='后端url',window.open(url)或者其他的方式,但是在前后端分离中这种方式不能把token也一起传到后端进行请求,导致权限不够访问不了后端。

  最后在多方面的尝试下,也和同事一起讨论,最后这么解决(直接附代码):

 1  /**
 2      * 导出用户列表
 3      */
 4     private exportUsers(){
 5         this.http.doPost({
 6             url: 'system/sysmanager/user/exportUsers', 
 7             responseType:ResponseContentType.Blob,  
 8             body:this.form,  //传入后端的表单数据
 9             success: (req, res) => {
10                 var blob = new Blob([res.json()]); //创建一个blob对象
11                 var a = document.createElement('a'); //创建一个<a></a>标签
12                 a.href = URL.createObjectURL(blob); // response is a blob
13                 a.download = "用户列表.xlsx";  //文件名称
14                 a.style.display = 'none';
15                 document.body.appendChild(a);
16                 a.click();
17                 a.remove();
18             }
19         });
20    }

开始以为后端代码需要更改,其实后端代码不需要更改,输出的是输出流、或者字节数组前端都可以进行转换。

这个博客有点简短,如果有什么意见或者问题欢迎大家指教。

 

目录
相关文章
|
8月前
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
259 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
6月前
|
前端开发 Cloud Native Java
Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现
博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现
|
10月前
|
缓存 前端开发
后端MultipartFile接收文件转Base64
后端MultipartFile接收文件转Base64
207 5
|
10月前
|
JavaScript API 开发工具
<大厂实战场景> ~ Flutter&鸿蒙next 解析后端返回的 HTML 数据详解
本文介绍了如何在 Flutter 中解析后端返回的 HTML 数据。首先解释了 HTML 解析的概念,然后详细介绍了使用 `http` 和 `html` 库的步骤,包括添加依赖、获取 HTML 数据、解析 HTML 内容和在 Flutter UI 中显示解析结果。通过具体的代码示例,展示了如何从 URL 获取 HTML 并提取特定信息,如链接列表。希望本文能帮助你在 Flutter 应用中更好地处理 HTML 数据。
310 1
|
11月前
|
JavaScript 前端开发
vue3教程,如何手动获取后端数据(入门到精通3,新人必学篇)
本文提供了一个Vue 3教程,讲解了如何使用axios库手动从后端获取数据,包括安装axios、配置后端访问地址、编写路由地址、发起HTTP请求以及在组件中读取和打印响应数据的步骤。
1718 0
vue3教程,如何手动获取后端数据(入门到精通3,新人必学篇)
|
10月前
|
缓存 前端开发
后端MultipartFile接收文件转Base64
后端MultipartFile接收文件转Base64
160 0
|
10月前
|
JSON Dart 数据格式
<大厂实战场景> ~ flutter&鸿蒙next处理后端返回来的数据的转义问题
在 Flutter 应用开发中,处理后端返回的数据是常见任务,尤其涉及转义字符时。本文详细探讨了如何使用 Dart 的 `dart:convert` 库解析包含转义字符的 JSON 数据,并提供了示例代码和常见问题的解决方案,帮助开发者有效处理数据转义问题。
377 0
|
11月前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
593 0
|
11月前
|
前端开发 JavaScript API
前端基于XLSX实现数据导出到Excel表格,以及提示“文件已经被损坏,无法打开”的解决方法
前端基于XLSX实现数据导出到Excel表格,以及提示“文件已经被损坏,无法打开”的解决方法
972 0
|
11月前
|
前端开发 JavaScript Java
导出excel的两个方式:前端vue+XLSX 导出excel,vue+后端POI 导出excel,并进行分析、比较
这篇文章介绍了使用前端Vue框架结合XLSX库和后端结合Apache POI库导出Excel文件的两种方法,并对比分析了它们的优缺点。
2574 0

热门文章

最新文章