简述前后端分离的情况下,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 ...
随机推荐
- spring cache 几个注解解释
转自https://www.cnblogs.com/fashflying/p/6908028.html 从3.1开始,Spring引入了对Cache的支持.其使用方法和原理都类似于Spring对事务管 ...
- C#中引用参数ref和输出参数out
引用参数 用于按引用传递自变量. 为引用参数传递的自变量必须是具有明确值的变量,并且在方法执行期间,引用参数指明的存储位置与自变量相同. 引用参数使用 ref 修饰符进行声明. 输出参数 用于按引用传 ...
- 【Linux学习二】Linux文件系统
Linux文件系统结构 ●Linux文件系统是一种倒转的单根结构 ●文件系统的根是"/" ●文件系统严格区分大小写 ●路径使用"/"分割(window下为&qu ...
- 【leetcode】LCP 2. 分式化简
题目如下: 有一个同学在学习分式.他需要将一个连分数化成最简分数,你能帮助他吗? 连分数是形如上图的分式.在本题中,所有系数都是大于等于0的整数. 输入的cont代表连分数的系数(cont[0]代表上 ...
- C# 写日志的方法
public void WriteLog(string msg) { string filePath = AppDomain.CurrentDomain.BaseD ...
- 插入排序,选择排序,冒泡排序等常用排序算法(java实现)
package org.webdriver.autotest.Study; import java.util.*; public class sort_examp{ public static voi ...
- JAVA学长
https://www.cnblogs.com/chenmingjun/p/9697371.html
- Nowcoder 练习赛26 D xor序列 ( 线性基 )
题目链接 题意 : 中文题.点链接 分析 : 对于给定的 X 和 Y 假设存在一个 Z 使得 X (xor) Z = Y 做一个变形 X (xor) Z (xor) Y = 0 X (xor) Y = ...
- Linux命令-文件传输
Linux命令-文件传输 Linux lprm命令 Linux lprm命令用于将一个工作由打印机贮列中移除 尚未完成的打印机工作会被放在打印机贮列之中,这个命令可用来将常未送到打印机的工作取消.由于 ...
- R_Studio(神经网络)BP神经网络算法预测销量的高低
BP神经网络 百度百科:传送门 BP(back propagation)神经网络:一种按照误差逆向传播算法训练的多层前馈神经网络,是目前应用最广泛的神经网络 #设置文件工作区间 setwd('D:\\ ...