vue-pdf 预览和下载

原创已于 2022-04-21 14:07:50 修改 · 2.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue #前端

于 2022-03-25 10:50:53 首次发布

Vue 专栏收录该内容

20 篇文章

订阅专栏

本文介绍三种不同的PDF处理方式：极简模式预览PDF，下载模式直接下载PDF为ZIP，及文件流模式显示PDF。通过不同场景下的实现代码示例，帮助读者理解如何在Web应用中集成这些功能。

  极简模式：pdf 预览


   handelDownload(row) {
      this.$axios({
        method: "get",
        url: baseUrl + getUrl,
        responseType: "arraybuffer",
        header: { "Content-Type": "multipart/form-data" },
        params: {
          billId: row.id,
        },
      }).then((resp) => {
        const binaryData = [];
         binaryData.push(resp.data);
        //获取blob链接
        this.pdfUrl = window.URL.createObjectURL(new Blob(binaryData, { type: 'application/pdf' }));
        window.open(this.pdfUrl);
      });
    },

  下载模式：pdf 下载

    handelDownload(row) {
      request({
        url: baseUrl + getUrl,
        method: "put",
        responseType: "blob",
        header: { "Content-Type": "multipart/form-data" },
        data: {
          idList: this.ids,
        },
      })
        .then((res) => {
          const url = window.URL.createObjectURL(new Blob([res.data]));
          const link = window.document.createElement("a");
          link.style.display = "none";
          link.href = url;
          link.setAttribute("download", "pdf" + ".zip");
          document.body.appendChild(link);
          link.click();
        })
        .catch((res) => {
        });
    },



 文件流模式：
  this.$axios({
        method: "get",
        url: baseUrl + getUrl,
        responseType: "arraybuffer",
        header: { "Content-Type": "multipart/form-data" },
        params: {
          billId: row.id,
        },
      }).then((resp) => {
        const binaryData = [];
        binaryData.push(resp.data);
        //获取blob链接
        this.pdfUrl = window.URL.createObjectURL(
          new Blob(binaryData, { type: "application/pdf" })
        );
        this.keyValue = row.id;
        this.flag = true;
      });

     <iframe :src="pdfUrl" page="0" frameborder="0" style="width: 100%; height: 100%"></iframe>