簡述前后端分離的情況下，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);
        }

3、遇到的問題

• 下載的時候彈出警告框，不影響