vue预览pdf并添加水印

    <div  id="demo" style="width:100%;margin-top:31px"></div>

FilePDFViewFun() {
        let than = this;
        FilePDFView({ param: this.param }).then(res => {
          this.pdfh5 = new Pdfh5("#demo", {
            data: res.data,
            renderType: "canvas",
          });
          var arr = [];
          this.pdfh5.on("complete", function (status, msg, time) {
            console.log("状态：" + status + "，信息：" + msg + "，耗时：" + time + "毫秒，总页数：" + this.totalNum)
            if (status == 'success') {
              let div = document.getElementsByClassName("pageContainer")
              than.$nextTick(() => {
                for (let i = 0; i < div.length; i++) {
                  arr.push(div[i].getElementsByTagName("img")[0].src)
                  let text = '姓名20230328';
                  let dome1 = div[i]
                  let dom = div[i].getElementsByTagName("img")[0];
                  var rotateAngle = Math.PI / 6;
                  var labels = new Array();
                  labels.push(text);
                  let pageWidth = dom.clientWidth
                  let pageHeight = dom.clientHeight
                  let canvas = document.createElement('canvas');
                  let canvasWidth = canvas.width = pageWidth;
                  let canvasHeight = canvas.height = pageHeight;
                  var context = canvas.getContext('2d');
                  //修改字号
                  context.font = "14px Arial";
                  context.translate(pageWidth / 2, pageHeight / 2 - 250);
                  context.rotate(-rotateAngle);
                  context.translate(-pageWidth / 2 - 5, -pageHeight / 2);
                  let textWidth = Math.max(...labels.map(item => context.measureText(item).width));
                  //设置y轴间距
                  let lineHeight = 15, fontHeight = 12, positionY, i
                  i = 0, positionY = 0
                  while (positionY <= pageHeight) {
                    positionY = positionY + lineHeight * 5
                    i++
                  }
                  canvasWidth += Math.sin(rotateAngle) * (positionY + i * fontHeight) // 给canvas加上画布向左偏移的最大距离
                  canvasHeight = 2 * canvasHeight
                  for (positionY = 0, i = 0; positionY <= canvasHeight; positionY = positionY + lineHeight * 5) {
                    context.translate(-(Math.sin(rotateAngle) * (positionY + i * fontHeight)), 0);
                    //设置x轴左右宽度
                    for (let positionX = 0; positionX < canvasWidth; positionX += 1.5 * textWidth) {
                      let spacing = 0;
                      labels.forEach(item => {
                        context.fillText(item, positionX, positionY + spacing);
                        spacing = spacing + lineHeight;
                      })
                    }
                    context.translate(Math.sin(rotateAngle) * (positionY + i * fontHeight), 0);
                    context.restore();
                    i++
                  }
                  let dataUrl = canvas.toDataURL('image/png');
                  let waterMarkPage = document.createElement('div');
                  waterMarkPage.id = "waterMark"
                  let style = waterMarkPage.style;
                  style.position = 'absolute';
                  style.overflow = "hidden";
                  style.left = 0;
                  style.top = 0;
                  style.opacity = '0.1';
                  style.background = "url(" + dataUrl + ")";
                  style.zIndex = 999;
                  style.pointerEvents = "none";
                  style.width = '100%';
                  style.height = pageHeight + 'px';
                  dome1.appendChild(waterMarkPage);
                }
              })
              than.pages = arr
              than.imgBooklist = true;
            }
          })
        });
      }