前端下载二进制流pdf文件，下载成功，打开空白问题解决

做pdf文件下载的时候，后端返回了二进制数据流，前端在发起请求时需要设置responseType: arraybuffer 或者blob类型才可以，具体操作可以看我之前的文章（传送门）。一开对接的时候下载打开都是正常的，过后突然就不行了，能下载成功，页数也是正常的，但是打开页面却都是空白的。搜索百度了一番，都是说设置好response Type就可以了，偶然发现有人评论说不能用axios请求要用原

Helen_fight

10228人浏览 · 2021-10-20 16:32:59

Helen_fight · 2021-10-20 16:32:59 发布

做pdf文件下载的时候，后端返回了二进制数据流，前端在发起请求时需要设置responseType: arraybuffer 或者blob类型才可以，具体操作可以看我之前的文章（传送门）。一开始对接的时候下载打开都是正常的，过后突然就不行了，能下载成功，页数也是正常的，但是打开页面却都是空白的。

搜索百度了一番，都是说设置好response Type就可以了，偶然发现有人评论说不能用axios请求要用原生的Ajax请求才可以，试了一下果然成功了。

具体代码：

downloadFn() {
      let that = this;
      this.loading = true;
      var xhr = new XMLHttpRequest(); // 用这种原生请求下载后端返回的二进制流打开就不会出现空白
      xhr.open(
        "get",
        "/server-api/api/system/rest/s/apply/agree-document/get?userId=" +
          this.userId,
        true
      );
      xhr.responseType = "blob";
      xhr.onload = function() {
        that.loading = false;
        const url = window.URL.createObjectURL(this.response);
        const link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        link.setAttribute("download", "渊亭科技服务协议.pdf");
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      };
      xhr.send();
    },