效果图：

方法一： 

代码： 

<template>
  <div class="tlhd-service-agreement">
    <div class="tlhd-service-agreement-text" @click="handleAgreement">《活动服务协议》</div>
    <div class="com-dialog-style">
      <el-dialog
        title="活动服务协议"
        :visible.sync="showTLAgreement"
        width="990px"
        class="agreement-dialog"
        center
      >
        <PDF ref="pdf" v-for="i in numPages" :key="i" :src="pdfUrl" :page="i" />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import PDF from 'vue-pdf';
export default {
  components: {
PDF
},
  data() {
    return {
      showTLAgreement: false, //显示协议
      numPages: null, //页数
       pdfUrl:
        'https://www.baidu.com/tlhd_service_agreement.pdf', //协议地址（替换自己的地址）
    };
  },
  computed: {},
  watch: {},
  methods: {
     handleAgreement() {
      this.getNumPages();
      this.showTLAgreement = true;
    },
    getNumPages() {
      let loadingTask = PDF.createLoadingTask(this.pdfUrl);
      loadingTask.promise
        .then((pdf) => {
          this.numPages = pdf.numPages;
        })
        .catch((err) => {
          console.error('pdf 加载失败', err);
        });
    },
  },
  created() {},
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
};
</script>
<style lang='scss' scoped>
.tlhd-service-agreement {
  .tlhd-service-agreement-text {
    color: #0064ff;
    cursor: pointer;
  }
}
</style>

方法二：  

<template>
  <div>
    <pdf :source="src" />
  </div>
</template>

<script>
import pdf from 'vue-pdf-embed/dist/vue2-pdf-embed'

export default {
  components: {
    pdf,
  },
  data() {
    return {
      src: `https://eventimg.oss-cn-shenzhen.aliyuncs.com/common_static/terms_of_agreement/tlhd_fileUrl.pdf`,//协议地址（替换自己的地址）
    }
  },
  methods: {},
  mounted() {},
}
</script>