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

简介:   在前后端分离的项目中涉及跨域问题,通常都会使用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    }

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

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

 

目录
相关文章
|
10天前
|
前端开发 JavaScript 关系型数据库
从前端到后端:构建现代化Web应用的技术探索
在当今互联网时代,Web应用的开发已成为了各行各业不可或缺的一部分。从前端到后端,这篇文章将带你深入探索如何构建现代化的Web应用。我们将介绍多种技术,包括前端开发、后端开发以及各种编程语言(如Java、Python、C、PHP、Go)和数据库,帮助你了解如何利用这些技术构建出高效、安全和可扩展的Web应用。
|
11天前
|
前端开发 小程序 Java
uniapp上传图片 前端以及java后端代码实现
uniapp上传图片 前端以及java后端代码实现
28 0
|
28天前
|
JSON 前端开发 Java
layui上传图片,前端直接拷代码,后端……
layui上传图片,前端直接拷代码,后端……
24 0
|
30天前
|
弹性计算 前端开发 小程序
微信小程序上传文件至阿里云OSS直传(java后端签名+前端直传)
当前的通用文件上传方式是通过前端上传到服务器,再由服务器转存至对象存储。这种方式在处理小文件时效率尚可,但大文件上传因受限于服务器带宽,速度较慢。例如,一个100MB的文件在5Mbps带宽的阿里云ECS上上传至服务器需160秒。为解决此问题,可以采用后端签名的方式,使微信小程序直接上传文件到阿里云OSS,绕过服务器中转。具体操作包括在JAVA后端引入相关依赖,生成签名,并在微信小程序前端使用这个签名进行文件上传,注意设置正确的请求头和formData参数。这样能提高大文件上传的速度。
|
2天前
|
存储 缓存 前端开发
前端如何利用indexDB进行数据优化
使用IndexedDB作为浏览器内置的客户端数据库,用于存储大量数据和实现离线支持。它能缓存常用数据,减少服务器请求,提高用户体验。IndexedDB支持数据索引、复杂查询及版本管理,允许离线操作并同步到服务器。但需熟悉其异步API,可借助Dexie.js、localForage等库简化使用。
|
6天前
|
小程序 前端开发 JavaScript
小程序全栈开发:前端与后端的完美结合
【4月更文挑战第12天】本文介绍了小程序全栈开发,涵盖前端和后端的关键点。前端使用WXML和WXSS进行页面结构和样式设计,JavaScript处理逻辑及组件使用;后端采用Node.js等语言处理业务逻辑、数据库设计和API接口开发。前端与后端通过数据交互实现结合,采用前后端分离模式,支持跨平台运行。调试测试后,提交微信审核并上线运营。掌握前端后端结合是小程序成功的关键。
|
8天前
|
JavaScript 前端开发 API
游戏开发入门:Python后端与Vue前端的协同工作方式
【4月更文挑战第11天】使用Python后端(Flask或Django)和Vue.js前端开发游戏变得流行,能提高开发效率和可维护性。本文指导如何构建这样的项目,包括设置环境、创建虚拟环境、搭建后端API及前端Vue组件,强调前后端协作和API接口的重要性。这种架构促进团队合作,提升代码质量和游戏体验。
|
9天前
|
供应链 JavaScript 前端开发
使用Django和Vue实现电子商务网站的后端和前端
【4月更文挑战第10天】本文介绍了使用Django和Vue构建电子商务网站的后端与前端方法。Django作为Python的Web框架负责后端,其模型-视图-控制器设计简化了商品管理、购物车和订单处理。Vue.js用于前端,提供数据驱动和组件化的用户界面。通过定义Django模型和视图处理请求,结合Vue组件展示商品和管理购物车,开发者可构建交互性强的电商网站。虽然实际开发涉及更多细节,但本文为入门提供了基础指导。
|
28天前
|
前端开发 JavaScript NoSQL
从前端到后端:构建全栈开发的技术生态
本文将探讨如何在全栈开发中构建完整的技术生态,从前端到后端各个层面进行深入剖析,讨论不同技术之间的协作与整合,为开发人员提供全面的指导与启示。
|
29天前
|
前端开发 JavaScript Java
从前端到后端:构建高效的全栈开发环境
本文将探讨如何在全栈开发中构建高效的开发环境,包括前端和后端技术栈的整合与优化,以及如何利用最新的工具和框架提升开发效率。