简述前后端分离的情况下,Vue实现点击图片下载到本地(并实现IE11浏览器的兼容)
1、简述
在前后端分离的项目中涉及跨域问题,通常都会使用token进行验证。最近在前后端分离的项目中在一个问题上搞了很久,就是以前下载附件或者导出数据为文件的时候,
在以前的那些项目前端可以直接用
window.location.href='后端url',
window.open(url)或者其他的方式,
但是在前后端分离中这种方式不能把token也一起传到后端
进行请求,导致权限不够访问不了后端。
2、基本使用
- Html代码
<el-button type="primary" @click="downLoad(url)">下载图片</el-button>
- Script代码
- data数据
url : '文件下载地址'
- methods方法
/**
* [getBlob 获取二进制流]
* @param {[String]} url [url]
* @param {[Blob]} [文件二进制]
*/
getBlob(url) {
return new Promise(resolve => {
const xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.responseType = "blob";
xhr.onload = () => {
if (xhr.status === ) {
resolve(xhr.response);
}
};
xhr.send();
});
},
/**
* [saveAs 下载保存文件]
* @param {[type]} fileUrl [文件地址]
*/
saveAs(fileUrl) {
if (window.navigator.msSaveOrOpenBlob) {
// 兼容IE11 发现在微软在ie10 和ie11中有两个特有的方法:window.navigator.msSaveBlob和window.navigator.msSaveOrOpenBlob 方法,
//这两个方法的区别在于,前者只有保存,后者有保存和打开两个选项,按个人喜好使用就行
this.getBlob(fileUrl).then(blob => {
navigator.msSaveBlob(
blob,
decodeURIComponent(
fileUrl
.split("?")[]
.split("&")[]
.split("=")[]
)
);
});
} else {
const iframe = document.createElement("iframe");
iframe.style.display = "none"; // 防止影响页面
iframe.style.height = ; // 防止影响页面
iframe.src = fileUrl;
document.body.appendChild(iframe); // 这一行必须,iframe挂在到dom树上才会发请求
// 5分钟之后删除(onload方法对于下载链接不起作用,就先抠脚一下吧)
setTimeout(() => {
iframe.remove();
}, * * );
}
},
downLoad(url) {
this.saveAs(url);
}
- data数据
3、遇到的问题
- 下载的时候弹出警告框,不影响

简述前后端分离的情况下,Vue实现点击图片下载到本地(并实现IE11浏览器的兼容)的更多相关文章
- 前后端分离跨域 关于前后端分离开发环境下的跨域访问问题(angular proxy=>nginx )
前后端分离后遇到了跨域访问的问题: angular1中使用proxy很麻烦,最后还是失败结束:最后总结3种方法如下: 本人使用的第一种方法,只是开发环境下使用很方便! 1:禁掉谷歌的安全策略(Turn ...
- 从壹开始前后端分离【 .NETCore2.1 +Vue 2 +AOP+DI】框架之一 || 前言
缘起 作为一个.Net攻城狮已经4年有余了,一直不温不火,正好近来项目不是很忙,闲得无聊,搞一搞新技术,一方面是打发无聊的时间,一方面也是督促自己该学习辣!身边的大神都转行的转行,加薪的加薪,本人比较 ...
- Z从壹开始前后端分离【 .NETCore2.1 +Vue 2 +AOP+DI】框架之一 || 前言
老张 .NetCore与Vue 框架学习目录
- springMVC前后端分离开发模式下支持跨域请求
1.web.xml中添加cors规则支持(请修改包名) <filter> <filter-name>cors</filter-name> <filter-cl ...
- Spring Boot + Vue 前后端分离开发,前端网络请求封装与配置
前端网络访问,主流方案就是 Ajax,Vue 也不例外,在 Vue2.0 之前,网络访问较多的采用 vue-resources,Vue2.0 之后,官方不再建议使用 vue-resources ,这个 ...
- springboot集成shiro 前后端分离 统一处理shiro异常
在前后端分离的情况下,shiro一些权限异常处理会返回401之类的结果,这种结果不好统一管理.我们希望的结果是统一管理,所有情况都受我们控制 就算权限验证失败,我们也希望返回200,并且返回我们定义的 ...
- @vue/cli 4.0+express 前后端分离实践
之前总结过一篇vue-cli 2.x+express+json-server实现前后端分离的帖子,@vue/cli3.0及4.0搭建的项目与vue-cli2.x的项目结构有很大的不同.这里对@vue/ ...
- Vue.js (Frontend & Backend)尝试前后端分离
前言 前端用什么框架都可以,这里选择小巧的vuejs. 要实现的功能很简单:1.登录功能,成功将服务器返回的token存在本地2.使用带token的header访问服务器的一个资源 本次实验环境: & ...
- 前后端分离ueditor富文本编辑器的使用-Java版本
最近在写一个自己的后台管理系统(主要是写着玩的,用来熟悉后端java的知识,目前只是会简单的写点接口),想在项目中编写一个发布新闻文章的功能,想到了使用百度的ueditor富文本编辑器,网上找了很多j ...
随机推荐
- 红帽Linux故障定位技术详解与实例(1)
红帽Linux故障定位技术详解与实例(1) 2011-09-28 14:26 圈儿 BEAREYES.COM 我要评论(0) 字号:T | T 在线故障定位就是在故障发生时, 故障所处的操作系统环境仍 ...
- vs2017 mvc 自定义路由规则 出现 404.0 错误代码 0x80070002
自定义: WebApiConfig 里面最后增加 config.Services.Replace(typeof(IHttpControllerSelector), new NamespaceHttp ...
- BZOJ 3697: 采药人的路径 点分治
好久不做点分治的题了,正好在联赛之前抓紧复习一下. 先把边权为 $0$ 的置为 $-1$.定义几个状态:$f[dis][0/1],g[dis][0/1]$ 其中 $f$ 代表在当前遍历的子树内的答案. ...
- 窗体操作:ShowWindow(SW_HIDE)
BOOL ShowWindow( int nCmdShow ); Return Value 作用: 如果窗口原来可见,则返回非零值:如果CWnd原来是隐藏的,则返回0 参数: Parameters ...
- 2-SAT (two-statisfiability) 算法 学习笔记
$2-SAT$问题指的是对于若干限制求出一组可行解的问题. 考虑对于$n$个值域为${0,1}$的变量$x_1 , x_2 ,...,x_n$ 满足若干限制: 若 $x_i = p$ 则 $x_j = ...
- Springboot 使用JPA
Springboot 使用jpa maven依赖 <dependency> <groupId>org.springframework.boot</groupId> ...
- ZOJ-3777-Problem Arrangement(状压DP)
http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3777 题意: 输入n和m,接下来一个n*n的矩阵,a[i][j]表示第i道 ...
- task.delay 和 thread.sleep
1.Thread.Sleep 是同步延迟. Task.Delay异步延迟. 2.Thread.Sleep 会阻塞线程,Task.Delay不会. 3.Thread.Sleep不能取消,Task.Del ...
- python虚环境
有的项目使用tornado框架比较好,有的用Django框架比较好,容易发生冲突,这个时候可以建立一个虚拟的python环境. 安装virtualenv包 进入项目所在目录,执行命令 virtuale ...
- Java操作Redis数据
Redis 是完全开源免费的,遵守BSD协议,先进的key - value持久化产品.它通常被称为数据结构服务器,因为值(value)可以是 字符串(String), 哈希(Map),列表(list) ...