简述前后端分离的情况下，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);
  }