简述前后端分离的情况下,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 ...
随机推荐
- 【Python网络爬虫三】 爬取网页新闻
学弟又一个自然语言处理的项目,需要在网上爬一些文章,然后进行分词,刚好牛客这周的是从一个html中找到正文,就实践了一下.写了一个爬门户网站新闻的程序 需求: 从门户网站爬取新闻,将新闻标题,作者,时 ...
- react浏览器回退按钮的时候传递参数
本来是有这个需求的,但是后来发现回退不也是到某个页面吗?接下来就使用了redux,真香啊,不管用户怎么操作,你到这个界面都给他一个值就完事了,没有就不给他这个值. 哈哈哈,公司框架使用umi.上代码 ...
- sparkStreaming(2.1.0)示范代码
package cn.piesat import org.apache.spark.SparkConfimport org.apache.spark.sql.SparkSessionimport or ...
- 【leetcode】1271. Hexspeak
题目如下: A decimal number can be converted to its Hexspeak representation by first converting it to an ...
- 走进Github的世界
1.官网注册账号 2.官网向导: https://guides.github.com/activities/hello-world/ 值得推荐: Git手册: https://git-scm.com/ ...
- 数组 slice方法和splice方法的区别
一.slice() 方法 slice()方法可以从已有的数组中返回选定的元素. 语法: arrayObject.slice(start,end) 参数: start:(截取开始位置的索引,包含开始索引 ...
- js 动态加载js 并执行
function loadJS(url, success) { var domScript = document.createElement('script'); domScript.src = ur ...
- TTTTTTTTTTTTTTTTTT hdu 1800 字符串哈希 裸题
题意:意思是有若干个飞行员,需要在扫帚上练习飞行,每个飞行员具有不同的等级,且等级高的飞行员可以当等级低的飞行员的老师,且每个飞行员至多有且只有一个老师和学生.具有老师和学生关系的飞行员可以在同一把扫 ...
- jQuery_获取html代码以及更改内容
代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title ...
- 「CQOI 2014」危桥
题目链接 戳我 \(Solution\) 首先往返\(n\)次等价于走\(2n\)次. 将 \(a_n*2,b_n*2\); 那么我们直接按原图构图,然后: \((S,a_1,a_n),(S,b_1, ...