npm  pdfjs-dist

<template>
  <div class="cpdf" id="cpdf">
    <!-- <top-normal-bar normalTitle="合同查看"></top-normal-bar> -->
    <div class="center">
      <div class="contor">
        <button @click="prev">上一页</button>
        <button @click="next">下一页</button>
        <span
          >Page: <span v-text="page_num"></span> /
          <span v-text="page_count"></span
        ></span>

        <button @click="addscale">加</button>
        <button @click="minus">减</button>
        <button id="prev" @click="closepdf">关闭</button>
      </div>
      <div id="apid" style="position: relative;">
        <canvas class="canvasstyle" id="the-canvas"></canvas>
      </div>
    </div>
  </div>
</template>
<script>
import PDFJS from "pdfjs-dist";
window.pdfjsWorker = require('pdfjs-dist/build/pdf.worker') 
export default {
  name: "c-pdf",
  props: ["pdfurl"],
  data() {
    return {
      pdfDoc: null, //pdfjs 生成的对象
      pageNum: 1, //
      pageRendering: false,
      pageNumPending: null,
      scale: 1, //放大倍数
      page_num: 0, //当前页数
      page_count: 0, //总页数
      maxscale: 2, //最大放大倍数
      minscale: 0.8, //最小放大倍数
    };
  },
  methods: {
    renderPage(num) {
      //渲染pdf
      let vm = this;
      this.pageRendering = true;
      let canvas = document.getElementById("the-canvas");
      // Using promise to fetch the page
      this.pdfDoc.getPage(num).then(function (page) {
        var viewport = page.getViewport(vm.scale);
        //alert(vm.canvas.height)
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        // Render PDF page into canvas context
        var renderContext = {
          canvasContext: vm.ctx,
          viewport: viewport,
        };
        var renderTask = page.render(renderContext);

        // Wait for rendering to finish
        renderTask.promise.then(function () {
          vm.pageRendering = false;
          if (vm.pageNumPending !== null) {
            // New page rendering is pending
            vm.renderPage(vm.pageNumPending);
            vm.pageNumPending = null;
          }
        });
      });
      vm.page_num = vm.pageNum;
    },
    addscale() {
      //放大
      if (this.scale >= this.maxscale) {
        return;
      }
      this.scale += 0.1;
      this.queueRenderPage(this.pageNum);
    },
    minus() {
      //缩小
      if (this.scale <= this.minscale) {
        return;
      }
      this.scale -= 0.1;
      this.queueRenderPage(this.pageNum);
    },
    prev() {
      //上一页
      let vm = this;
      if (vm.pageNum <= 1) {
        return;
      }
      vm.pageNum--;
      vm.queueRenderPage(vm.pageNum);
    },
    next() {
      //下一页
      let vm = this;
      if (vm.pageNum >= vm.page_count) {
        return;
      }
      vm.pageNum++;
      vm.queueRenderPage(vm.pageNum);
    },
    closepdf() {
      //关闭PDF
      this.$emit("closepdf");
    },
    queueRenderPage(num) {
      if (this.pageRendering) {
        this.pageNumPending = num;
      } else {
        this.renderPage(num);
      }
    },

    // 以下为水印
    setWatermarkContent() {
      // 1.创建canvas容器（用于显示水印文字）
      let ele = document.createElement("canvas");
      ele.width = 350;
      ele.height = 200;
      let objmsg = {
        canvas: ele,
        fontText: "zhangsan-2023-01-01", // String
        fontSize: 20,
        fontFamily: "microsoft yahei",
        fontcolor: "#dadbdc", //字体颜色   默认 #dadbdc
        rotate: 25, //旋转角度   数字类型
        textAlign: "left", //水印文字居中方式:left center right  默认 left
      };
      // 2.创建水印canvas
      this.createWaterMark(objmsg);
       // 2.将水印canvas遮罩层定位到pdf容器中
      this.drawWaterMark(ele);
    },
    // 创建canvas水印图片
    createWaterMark({ canvas, fontText, fontFamily = "microsoft yahei", fontSize = 30, fontcolor = "#dadbdc", rotate = 30, textAlign = "left" }) {
      let ctx = canvas.getContext("2d");
      ctx.font = `${fontSize}px ${fontFamily}`;
      ctx.rotate((-rotate * Math.PI) / 180);
      ctx.fillStyle = fontcolor;
      ctx.textAlign = textAlign;
      ctx.textBaseline = "Middle";
      ctx.fillText(fontText, canvas.width / 6, canvas.height / 2);
    },
    // 给pdf增加水印遮罩层
    drawWaterMark(ele) {
      let div = document.createElement("div");
      div.style.pointerEvents = "none";
      div.style.top = "0";
      div.style.left = "0px";
      div.style.position = "absolute";
      div.style.background = "url(" + ele.toDataURL("image/png") + ") left top repeat";
    
      this.$nextTick(()=>{
        let width = document.getElementById("the-canvas").clientWidth || 700;
        let height = document.getElementById("the-canvas").clientHeight || 700;
        div.style.width = width + "px";
        div.style.height = height + "px";
        console.log(' document.getElementById', document.getElementById("apid"))
        document.getElementById("apid").appendChild(div);
      })
    },
  },
  computed: {
    ctx() {
      let id = document.getElementById("the-canvas");
      return id.getContext("2d");
    },
  },
  mounted() {
    console.log("进入pdf组件", this.pdfurl);
    let vm = this;
    PDFJS.getDocument(vm.pdfurl).then(function (pdfDoc_) {
        //初始化pdf
        console.log("pdfDoc_", pdfDoc_);
        vm.pdfDoc = pdfDoc_;
        vm.page_count = vm.pdfDoc.numPages;
        vm.renderPage(vm.pageNum);
        // vm.setWatermarkContent()
    }).catch((err)=>{
        console.log('err====', err)
    });
    
  },
};
</script>

<style scoped>
.cpdf {
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.center {
  text-align: center;
  height: 100%;
  overflow: auto;
  padding-top: 20px;
}
.contor {
  margin-bottom: 10px;
}
</style>

使用

<c-pdf  id="pdfBox2" :style="{ width: '100%', height: '100%' }" :pdfurl="pdf"></c-pdf>

import CPdf from "./cPdf";

components: {
    CPdf
  },