不需要安装任何插件！！！因为放在iframe显示的，浏览器直接支持

先上效果图

完整代码，粘贴即用👇

<template>
  <div class="app">
    <el-button @click="preview1">预览在线PDF</el-button>
    <el-button @click="preview2">请求后端预览</el-button>
    <el-dialog
      v-if="previewShow"
      title="预览"
      :visible.sync="previewShow"
      append-to-body
      width="90%"
    >
      <!-- PDF显示的地方 -->
      <iframe ref="pdf" :src="previewUrl" width="100%"></iframe>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" plain @click="previewShow = false"
          >关 闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      previewShow: false,
      previewUrl: "",
    };
  },
  methods: {
    // 直接传入一个地址
    preview1() {
      this.previewShow = true;
      this.previewUrl = "https://www.gjtool.cn/pdfh5/git.pdf";
      this.$nextTick(() => {
        this.$refs.pdf.height = document.documentElement.clientHeight;
      });
    },
    // 后端返回二进制流
    preview2() {
      this.previewShow = true;
      axios
        .get("你们后端的地址（下载地址）", {
          responseType: "blob",
        })
        .then((res) => {
          // 对后端返回二进制流做处理
          this.previewUrl = window.URL.createObjectURL(
            new Blob([res], { type: "application/pdf" })
          );
          // 重新设置大小
          this.$nextTick(() => {
            this.$refs.pdf.height = document.documentElement.clientHeight;
          });
        });
    },
  },
};
</script>
<style scoped>
</style>

注意事项：

1. 我这里是放在dialog里面显示的，你也可以放到其他容器内

2. 第二种预览方式需要后端返回二进制流，和下载接口一样

        二进制流长这样

在线预览word：Vue在线预览word

有帮助到你记得点点赞哦~