背景

后台返回文件流(blob)； 在当前页面预览pdf（不打开新的窗口，采用iframe），并下载。

vue-pdf预览

1.在适合位置嵌入iframe标签

  <iframe :src="pdfUrl" frameborder="0" width="100%" :style="{height: tableHeight,overflow:'auto'}"></iframe>

2.在methods中添加相应方法

pdfPreview(val) {
  this.previewDownFile(val).then(v => {
    if (v.status == 200) {
      const binaryData = [];
      binaryData.push(v.data);
      let url = window.URL.createObjectURL(new Blob(binaryData, {type: 'application/pdf'}));
      this.pdfUrl = url
    } else {
      this.$message.error("请求错误！");
    }
  })
},

  previewDownFile(val) {
    return new Promise((resolve, reject) => {
      this.$axios({
        url: `file-server/download/annex/${val.value}`,
        timeout: 0,
        method: 'get',
        responseType: 'blob',
        header: {"Content-Type": "multipart/form-data"},
      }).then(res => {
        resolve(res)
      }).catch(() => {
        resolve(false);
      });
    });
  },

pdf的下载

vue 文件流下载pdf文件

getPdf() {
  return new Promise((resolve, reject) => {
    this.$axios({
      url: `file-server/download/${this.emitData.fileId}`,
      timeout: 0,
      method: 'get',
      responseType: 'blob',
    }).then(res => {
      resolve(res)
    }).catch(() => {
      resolve(false);
    });
  });
},

  downloadPdf() {
    this.getPdf().then(res => {
      if (res.status == 200) {
        let blob = new Blob([res.data], {
          // type类型后端返回来的数据中会有，根据自己实际进行修改
          // 表格下载为 application/xlsx，压缩包为 application/zip等，
          type: `application/pdf` //word文档为msword,pdf文档为pdf
        });
        const fileName = 'pdf-test'
        //兼容性处理
        if (typeof window.navigator.msSaveBlob !== "undefined") {
          window.navigator.msSaveBlob(blob, filename);
        } else {
          // 创建隐藏<a>标签进行下载
          const tempLink = document.createElement("a");
          tempLink.href = window.URL.createObjectURL(blob);
          tempLink.style.display = 'none';
          tempLink.setAttribute('download', fileName);
          if (typeof tempLink.download === "undefined") {
            tempLink.setAttribute("target", "_blank");
          }
          document.body.appendChild(tempLink);
          tempLink.click();
          URL.revokeObjectURL(tempLink.href); // 释放URL 对象
          document.body.removeChild(tempLink);
        }
      }
    })
  },

下载附件封装【推荐】

export function exportPdf(data, fileName) {
  let blob = new Blob([data], {
    //type类型后端返回来的数据中会有，根据自己实际进行修改
    // 表格下载为 application/xlsx，压缩包为 application/zip等，
    type: "application/pdf"
  });
  let filename = fileName;
  //兼容性处理
  if (typeof window.navigator.msSaveBlob !== "undefined") {
    window.navigator.msSaveBlob(blob, filename);
  } else {
    // 创建隐藏<a>标签进行下载
    const tempLink = document.createElement("a");
    tempLink.href = window.URL.createObjectURL(blob);
    tempLink.style.display = 'none';
    tempLink.setAttribute('download', fileName);
    if (typeof tempLink.download === "undefined") {
      tempLink.setAttribute("target", "_blank");
    }
    document.body.appendChild(tempLink);
    tempLink.click();
    URL.revokeObjectURL(tempLink.href); // 释放URL 对象
    document.body.removeChild(tempLink);
  }
}