原生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();
  }

}

好了，就是这么一段代码，下面是效果：

点击下载后下载二维码：