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

Helen_fight

已于 2022-08-10 11:13:27 修改

阅读量1w

点赞数 7

分类专栏： javascript 文章标签： javascript

于 2021-10-20 16:32:59 首次发布

本文链接：https://blog.csdn.net/yemuxia_sinian/article/details/120868618

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

博客讲述了作者在前端下载PDF文件时遇到的问题，即下载的文件打开后显示为空白。通过百度搜索和尝试，发现使用axios请求时可能会出现此问题，而改用原生XMLHttpRequest请求并设置responseType为blob可以成功解决。代码示例中展示了如何使用原生Ajax请求下载二进制流并创建下载链接。

摘要由CSDN通过智能技术生成

做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();
    },