vue项目-pdf预览和下载，后台返回文件流形式

背景：正好最近碰到了这种需求，记录下来，方便以后查看。

后端返回的文件流数据如下图所示：

一、pdf的预览

一开始的时候百度了很多方法，有建议用pdfJs插件的，有iframe嵌套实现的，最后发现了一种及其简便的实现方法：

pdfPreview(url){
    this.$http({
        url: `account/registerOpen/${url}`,
        method: 'get',
        responseType: 'arraybuffer',   //一定要设置响应类型，否则页面会是空白pdf
        params: { accountId: id, lang: 'en_US' }
      }).then(res => {
          const binaryData = [];
          binaryData.push(res);
          //获取blob链接
          this.pdfUrl = window.URL.createObjectURL(new Blob(binaryData, { type: 'application/pdf' }));
          window.open(this.pdfUrl);
        }
      });
    }
}

二、pdf的下载

下载也挺简单的，代码如下：

pdfDownload(url){
      const id = sessionStorage.getItem('idPdf').replace(/"/g, '');
      this.$http({
        url: `account/registerOpen/${url}`,
        method: 'get',
        responseType: 'arraybuffer',
        params: { accountId: id, lang: 'en_US' }
      }).then(res => {
        // 下载pdf
        if (url === 'PerPdf/download' || url === 'PerCrsPdf/download' || url === 'PerWbenContractPdf/download') {
          //type类型可以设置为文本类型，这里是pdf类型
          this.pdfUrl = window.URL.createObjectURL(new Blob([res], { type: `application/pdf` }));
          const fname = `个人开户资料`; // 下载文件的名字
          const link = document.createElement('a');
          link.href = this.pdfUrl;
          link.setAttribute('download', fname);
          document.body.appendChild(link);
          link.click();
        } 
      });
}