记录h5 端pdf 查看和加水印

项目里有 pdfh5 就直接用里边的包

const pdfjs = require("pdfh5/js/pdf");
const pdfWorker = require("pdfh5/js/pdf.worker");
pdfjs.GlobalWorkerOptions.workerSrc = pdfWorker;

    async pdfInit(pdfUrl) {
      try {
        const pdfDoc = await pdfjs.getDocument(pdfUrl).promise;
        const totalPage = pdfDoc.numPages;
        for (let i = 1; i <= totalPage; i++) {
          const page = await pdfDoc.getPage(i);
          let scaledViewport = page.getViewport({ scale: 1.5 });
          let canvas = document.createElement("canvas");

          canvas.height = scaledViewport.height;
          canvas.width = scaledViewport.width;
          const listIndex = +document.querySelector(".pdfImg").childNodes
            .length;
          canvas.className = "img-item";
          canvas.setAttribute("data-pdf-index", listIndex);
          canvas.style.width = "100%";
          let context = canvas.getContext("2d");
          let renderContext = {
            canvasContext: context,
            viewport: scaledViewport
          };
          await page.render(renderContext);
          // 这个方法是加水印的
          const canvasFillStyle = context.createPattern(
            this.initWatermark(),
            "repeat"
          );
          context.rect(0, 0, scaledViewport.width, scaledViewport.height);
          context.fillStyle = canvasFillStyle;
          context.fill();
          canvas.remove();

          document.querySelector(".pdfImg").appendChild(canvas);
        }
        return [];
      } catch (error) {
        return error;
      }
    }

水印的方法

initWatermark() {
      let canvas = document.createElement("canvas");
      canvas.width = 460;
      canvas.height = 240;
      let ctx = canvas.getContext("2d");
      ctx.font = "32px Vedana";
      ctx.fillStyle = "rgba(200, 200, 200, .3)";
      ctx.textAlign = "left";
      ctx.textBaseline = "middle";
      ctx.rotate((-18 * Math.PI) / 180);
      ctx.fillText('测试测试', 0, 180);
      return canvas;
    }