极简模式: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>

Logo

Vue社区为您提供最前沿的新闻资讯和知识内容

更多推荐