原生js處理後臺返回的文件流

最近在作項目時有一個這樣需求，須要下載一個二維碼，當我瞭解以後，我覺得和普通的下載同樣呢，結果後臺大哥返回的是文件流格式，聽說這是由於後臺是分佈式部署，不能持久化存儲，沒辦法，只能前端來處理這個文件流了。
由於以前我也搞過下載的功能，是一個txt格式的文本，我用了
<a :href='mapDownloadUrl' download='mapDownloadUrl'>下載</a>這種方式，至關因而後臺把文件已經生成好，我直接經過請求URL獲取文件。

處理文件流

HTML

<el-table-column min-width="120" prop="deviceIp" label="設備二維碼下載" align='center'>
  <template slot-scope="scope">
    <el-button size="small" class="download-class" @click="downloadCode(scope.row)">下載</el-button>
  </template>
</el-table-column>

JS

// 下載二維碼
    downloadCode(row){
      let url = `/common/fileOperate/getQrCode/${row.deviceCode}`
      downloadStream("GET",url,`${row.typeName}-${row.deviceCode}.png`)
    },

我這邊把它封裝在了公共庫裏：

export const downloadStream = (method = 'GET', url, downloadName) => {
  const ctoken = getCookie('AIB_TOKEN')
  if (ctoken) {
    let xmlResquest = new XMLHttpRequest();
    xmlResquest.open(method, url, true);
    xmlResquest.setRequestHeader("Content-type", "application/json;charset=UTF-8");
    //這裏須要在請求頭添加該參數，已防止CSRF
    xmlResquest.setRequestHeader("csrfToken", hashStr(ctoken));
    xmlResquest.responseType = "blob";
    xmlResquest.onload = function (oEvent) {

      let content = xmlResquest.response;
      let elink = document.createElement('a');
      elink.download = downloadName;
      elink.style.display = 'none';
      let blob = new Blob([content]);
      elink.href = URL.createObjectURL(blob);

      document.body.appendChild(elink);
      elink.click();
      document.body.removeChild(elink);
    };
    xmlResquest.send();
  }

}

好了，就是這麼一段代碼，下面是效果：

點擊下載後下載二維碼：