简述前后端分离的情况下,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 ...
随机推荐
- 【GitHub】命令行操作
提交文件 本地修改之后:git add . 提交到暂存区 commit一下:git commit -m "xxx" -m表示信息,不填无法commit 提交到远程仓库: ...
- webpack打包,同时将ES6转为ES5,初探
webpack打包,同时将ES6转为ES5,第一次尝试搞了一下午才弄好,所有的问题均来自ES6转es5上面,可能天分不够把,但愿各大浏览器快点支持ES6吧!忽略nodejs安装. 第一,新建一个项目文 ...
- dede cms 怎样调用年月日
一: 首页:([field:pubdate function='strftime("%m-%d",@me)'/])==(5-15)([field:pubdate function= ...
- 浏览器使用小tip
谷歌浏览器截取长图 很多网页长图单个页面截不下来,那么需要如何解决? 首先,在谷歌浏览器chrome中打开需要截图的网页,等待需要截图的网页打开完毕,然后按F12 打开开发者工具,然后按组合键 Ctr ...
- UE4 使用VaRest的最佳实践
背景介绍: 用Node.js,express,Mongo搭建了一个简单后台,为项目提供REST风格的API服务. 第一个查询是通过Get进行,返回一个json字符串. 在虚幻里使用VaRest来进行访 ...
- linux下安装R
下载 版本:R3.2.2 下载地址:http://cran.rstudio.com/src/base/R-3/R-3.2.2.tar.gz 安装步骤: 解压 tar -zxvf R-3.2.2.tar ...
- postman 测试api接口
安装:https://www.getpostman.com/ 谷歌插件安装需要翻墙才能访问,那么直接去官网下载pc端 代码图片: 非常简单 post: 代码图片: 剪头地方,必选
- C++入门经典-例5.1-输出变量的指针
1:代码如下: // 5.1.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> using ...
- MqttConnectReturnCode枚举值
特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...
- TCP定时器 之 FIN_WAIT_2定时器
当TCP主动关闭一端调用了close()来执行连接的完全关闭时会执行以下流程,本端发送FIN给对端,对端回复ACK,本端进入FIN_WAIT_2状态,此时只有对端发送了FIN,本端才会进入TIME_W ...