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

简介:   在前后端分离的项目中涉及跨域问题,通常都会使用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天前
|
前端开发
前端使用xlsx模板导出表格
【9月更文挑战第10天】在前端使用 `xlsx` 模板导出表格需完成以下步骤:首先引入 `xlsx` 库,准备数据与模板;接着读取模板文件,选择特定工作表并填充数据;最后将填充后的表格转换为二进制数据,创建 Blob 对象并触发下载。整个过程中可根据需求调整模板格式和数据填充方式。
|
25天前
|
JavaScript 前端开发 编译器
纯前端如何实现批量dom转图片,并下载成压缩包
【8月更文挑战第22天】纯前端如何实现批量dom转图片,并下载成压缩包
46 0
|
2月前
|
前端开发 JavaScript
前端 JS 经典:下载的流式传输
前端 JS 经典:下载的流式传输
34 1
|
3月前
|
SQL XML 数据库
后端数据库开发高级之通过在xml文件中映射实现动态SQL
后端数据库开发高级之通过在xml文件中映射实现动态SQL
36 3
|
2月前
|
前端开发 JavaScript Linux
若依修改之后,无法访问前端项目如何解决,只能访问后端的接口,我的接口8083,端不显示咋解决?在vue.config.js文件中的映射路径要跟后端匹配,到软件商店里找到Ngnix配置代理,设80不用加
若依修改之后,无法访问前端项目如何解决,只能访问后端的接口,我的接口8083,端不显示咋解决?在vue.config.js文件中的映射路径要跟后端匹配,到软件商店里找到Ngnix配置代理,设80不用加
|
2月前
|
前端开发
支付系统--微信支付21--搭建前端环境,payment-demo-front这个项目文件夹是前端显示文件,payment-demo是后端项目,支付页面常见三个页面:购买课程,我的订单,下载账单
支付系统--微信支付21--搭建前端环境,payment-demo-front这个项目文件夹是前端显示文件,payment-demo是后端项目,支付页面常见三个页面:购买课程,我的订单,下载账单
|
2月前
|
前端开发
纯前端导出表格数据 -- csv格式 (含表格末尾的自动合计行)
纯前端导出表格数据 -- csv格式 (含表格末尾的自动合计行)
23 0
|
2月前
|
前端开发 数据库
网页设计,若依项目修改(网页设计,若依项目修改(It must be done)10------下载字典类型后端三句话在做啥
网页设计,若依项目修改(网页设计,若依项目修改(It must be done)10------下载字典类型后端三句话在做啥
|
3月前
|
前端开发 计算机视觉
视觉智能开放平台操作报错合集之人脸对比1:1,采用web前端直接调用,使用了base64处理图片,提示http错误码414,该如何处理
在使用视觉智能开放平台时,可能会遇到各种错误和问题。虽然具体的错误代码和消息会因平台而异,但以下是一些常见错误类型及其可能的原因和解决策略的概述,包括但不限于:1. 认证错误、2. 请求参数错误、3. 资源超限、4. 图像质量问题、5. 服务不可用、6. 模型不支持的场景、7. 网络连接问题,这有助于快速定位和解决问题。
|
3月前
|
存储 Java 应用服务中间件
后端企业级开发之yaml数据序列化格式文件详解2024
后端企业级开发之yaml数据序列化格式文件详解2024
39 0

热门文章

最新文章