前后端分离,导出数据为文件或下载文件,前端如何处理后端返回的数据
2018-01-16 15:35
357 查看
在前后端分离的项目中涉及跨域问题,通常都会使用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 }
开始以为后端代码需要更改,其实后端代码不需要更改,输出的是输出流、或者字节数组前端都可以进行转换。
这个博客有点简短,如果有什么意见或者问题欢迎大家指教。
相关文章推荐
- 前端文件上传,struts2后台返回json数据,在IE为什么会以文件下载的形式打开。
- 后端返回的数据,如何在前端进行渲染
- 前端开发如何模拟后端返回json数据
- asp.net 生成导出word表单 ,导出excel; dataTable生成xls文件,返回前台下载;asp.net启动excel错误 80070005;excel-xls columnName 不能改变; 读写excel的开源利器NPOI; 设置excel Cell的数据类型;
- 如何处理BLOB类型数据之二:下载BLOB内容并保存到文件中
- 关于Excel操作编写的一个软件设计构思案例[连载] --如何把处理好后的数据导出Excel文件中(含背景\字体颜色设置)
- RxJava + Retrofit+okhttp 封装,包含对相同格式请求数据、相同格式返回数据处理,显示 Material Design 加载 dialog,文件上传下载进度展示、全局异常捕捉。
- 如何解决“文件上传返回JSON数据,在IE下提示下载文件”的问题?
- 如何解决“文件上传返回JSON数据,在IE下提示下载文件”的问题?
- 如何在Vue项目中使用Mockjs,模拟接口返回的数据,实现前后端分离独立开发
- 处理文件上传后返回json数据在IE出现文件下载问题
- datagrid数据导出到excel文件给客户端下载的几种方法
- datagrid数据导出到excel文件给客户端下载的几种方法
- jquery mvc ajax json 当返回json的数据为数组对象时。该如何处理?
- datagrid数据导出到excel文件给客户端下载的几种方法
- datagrid数据导出到excel文件给客户端下载的几种方法
- datagrid数据导出到excel文件给客户端下载的几种方法
- 数据写入到csv文件或者通过浏览器导出到下载文件
- datagrid数据导出到excel文件给客户端下载的三种方法
- Asp.net 2.0 GridView数据导出Excel文件(示例代码下载)