前端实现预览二进制流pdf文件

获取数据转换为地址

getSubmissions(data, {
                responseType: 'arraybuffer'
              }).then(res => {
                this.wordResData = res;
                var reg = /^['|"](.*)['|"]$/;
                const data = res.data;
                const tempName = res.headers['content-disposition']
                  .split('filename=')[1]
                  .replace(reg, '$1');
                /* 兼容ie内核，360浏览器的兼容模式 */
                if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                  const blob = new Blob([data], {
                    type: 'application/pdf;charset=utf-8'
                  });
                  window.navigator.msSaveOrOpenBlob(blob, tempName);
                } else {
                  /* 火狐谷歌的文件下载方式 */
                  var blob = new Blob([data], {
                    type: 'application/pdf;charset=utf-8'
                  });
                  var href = window.URL.createObjectURL(blob);
                  this.imageUrl = href;
                }
              });

使用iframe嵌套进行预览

<iframe
              frameborder="0"
              scrolling="auto"
              :src="imageUrl"
              type="application/x-google-chrome-pdf"
              width="100%"
              height="622px"
            />

注意：iframe一定要设置高度
此方法不兼容ie