接口返回pdf文件流，前端打印、下载操作

最新推荐文章于 2026-04-16 13:52:06 发布

原创最新推荐文章于 2026-04-16 13:52:06 发布 · 669 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#pdf #前端

收录于

接口返回pdf文件流，前端打印、下载操作

获取pdf文件流

  exoprtPdf(api, obj, type) {
      api({
        ...obj,
        userId: this.userId,
      }).then((resp) => {
        if (type == 1) {
          this.saveFile(resp.data);//下载
        } else {
          this.printFn(resp.data);//打印
        }
      });
    },

下载

 saveFile(data) {
      let blob = new Blob([data], {
        type: "application/pdf",
      });
      let url = window.URL || window.webkitURL;
      let fileURL = url.createObjectURL(blob);
      let a = document.createElement("a");
      a.href = fileURL;
      a.download = "";
      a.target = "_self";
      a.click();
      url.revokeObjectURL(fileURL);
    },

打印

 printFn(dataResult) {
      var date = new Date().getTime();
      var ifr = document.createElement("iframe");
      ifr.style.frameborder = "no";
      ifr.style.display = "none";
      ifr.style.pageBreakBefore = "always";
      ifr.setAttribute("id", "printPdf" + date);
      ifr.setAttribute("name", "printPdf" + date);
      ifr.src = window.URL.createObjectURL(dataResult);
      document.body.appendChild(ifr);
      this.doPrint("printPdf" + date);
      window.URL.revokeObjectURL(ifr.src); // 释放URL 对象
    },
    doPrint(val) {
      var ordonnance = document.getElementById(val).contentWindow;
      setTimeout(() => {
        ordonnance.print();
      }, 100);
    },