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);
}
3、遇到的问题
下载的时候弹出警告框，不影响
