简述前后端分离的情况下,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 === 200) { 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("?")[1] .split("&")[0] .split("=")[1] ) ); }); } else { const iframe = document.createElement("iframe"); iframe.style.display = "none"; // 防止影响页面 iframe.style.height = 0; // 防止影响页面 iframe.src = fileUrl; document.body.appendChild(iframe); // 这一行必须,iframe挂在到dom树上才会发请求 // 5分钟之后删除(onload方法对于下载链接不起作用,就先抠脚一下吧) setTimeout(() => { iframe.remove(); }, 5 * 60 * 1000); } }, downLoad(url) { this.saveAs(url); }
- data数据
3、遇到的问题
- 下载的时候弹出警告框,不影响
北栀女孩儿