vue在线预览pdf-- “iframe“ 标签或者window.open()

小tenten

已于 2022-11-29 16:29:51 修改

阅读量3.5k

点赞数 1

分类专栏： vue js 文章标签： vue.js javascript 前端

于 2022-06-16 17:01:14 首次发布

本文链接：https://blog.csdn.net/qq_39877681/article/details/125317931

版权

vue 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

12 篇文章 0 订阅

订阅专栏

vue在线预览pdf

1、在当前界面打开–使用“iframe” 标签

2、在新的窗口打开-- window.open()

实现原理：点击“预览”按钮，通过向后端发起请求，获取到文件的流文件，再打开。

1、在当前界面打开–使用“iframe” 标签

 <el-button slot="trigger" size="small" type="primary" plain @click="openPDF">
          预览
</el-button>
<iframe :src="fileURLOther"></iframe>

import axios from "axios";
data() {
    return {
      fileURLOther: "",
      annex: { id: null, name: "", url: "" },
    }
}

methods：{
  openPDF() {
      axios({
        method: "get",
        url: this.annex.url,//文件的url
        params: {
          fileId: this.annex.id,//文件的id
        },
        responseType: "blob",
      }).then((res) => {
        // loading.close();
        console.log("res", res);
        if (res.status == "500") {
          this.$message({
            message: "下载失败！",
            type: "error",
          });
          return;
        }
        //文件以pdf形式进行预览
        let blob = new Blob([res.data], {
          type: "application/pdf;chartset=UTF-8",
        });
        let fileURL = URL.createObjectURL(blob);
        this.fileURLOther = fileURL;
      });
    },
}

2、在新的窗口打开-- window.open()

 <el-button slot="trigger" size="small" type="primary" plain @click="openPDF">
          预览
</el-button>

import axios from "axios";
data() {
    return {
      annex: { id: null, name: "", url: "" },
    }
}

methods：{
  openPDF() {
      axios({
        method: "get",
        url: this.annex.url,//文件的url
        params: {
          fileId: this.annex.id,//文件的id
        },
        responseType: "blob",
      }).then((res) => {
        // loading.close();
        console.log("res", res);
        if (res.status == "500") {
          this.$message({
            message: "下载失败！",
            type: "error",
          });
          return;
        }
        //文件以pdf形式进行预览
        let blob = new Blob([res.data], {
          type: "application/pdf;chartset=UTF-8",
        });
        let fileURL = URL.createObjectURL(blob);
        window.open(fileURL);
      });
    },
}