vue3使用pdfjs预览pdf文件并显示水印

版本：

"pdfjs-dist": "^2.16.105"

"vue3-pdfjs": "^0.1.6"

也可以参考https://gitee.com/xlybyte/vue3-pdf-demo/tree/master，demo很详细。

首先在页面中引入pdfjs

import * as PDFJS from "pdfjs-dist/legacy/build/pdf";
import pdfjsWorker from "pdfjs-dist/legacy/build/pdf.worker.entry.js"; // 引入workerSrc的地址

 然后设置pdf.worker.js文件的引入地址

// 设置pdf.worker.js文件的引入地址
PDFJS.GlobalWorkerOptions.workerSrc = pdfjsWorker;

渲染pdf的div

<div ref="pdfRef"></div>

以下是完整版代码： 

<script setup lang="ts">

import { ref, computed, onMounted } from "vue";
import * as PDFJS from "pdfjs-dist/legacy/build/pdf";
import pdfjsWorker from "pdfjs-dist/legacy/build/pdf.worker.entry.js"; // 引入workerSrc的地址
// 设置pdf.worker.js文件的引入地址
PDFJS.GlobalWorkerOptions.workerSrc = pdfjsWorker;

const pdfRef: any = ref(null); //渲染pdf的div

let pages: any = ref(0);
onMounted(()=>{
    // 获取文件链接传参
    getDocx(参数)
})
//docx和pdf文档 在线预览功能
const getDocx = async (val) => {
  const loading = proxy.$ElLoading.service({
    lock: true,
    background: "rgba(255, 255, 255, 0.4)",
  });
  PDFJS.getDocument({
    url: val.url,
    cMapUrl: "https://unpkg.com/pdfjs-dist@2.16.105/cmaps/", // 显示pdf文件的水印
    cMapPacked: true,
 }).promise.then((pdfDoc) => {
   pages.value = pdfDoc.numPages; // pdf的总页数
   renderPage(pdfDoc);
   loading.close();
 });
};
// 渲染PDF文件
const renderPage = async (pdfDoc) => {
  for (let i = 1; i <= pages.value; i++) {
    const page = await pdfDoc.getPage(i);
    let viewport = page.getViewport({ scale: 1.2 });
    let divPage = window.document.createElement("div");
    // 使用canvas渲染
    let canvas = divPage.appendChild(window.document.createElement("canvas"));
    divPage.className = "page";
    pdfRef.value.appendChild(divPage);
    const pixelRatio = 2;
    canvas.width = viewport.width * pixelRatio;
    canvas.height = viewport.height * pixelRatio;
    canvas.style.maxWidth = "100%";
    let renderContext = {
      canvasContext: canvas.getContext("2d"),
      viewport: viewport,
      transform: [pixelRatio, 0, 0, pixelRatio, 0, 0],
    };
    await page.render(renderContext).promise; // 一页一页的渲染
    divPage.className = "page complete";
  }
};
</script>

要显示水印一定要配置

 cMapUrl: "https://unpkg.com/pdfjs-dist@2.16.105/cmaps/"
 cMapPacked: true

以上两个属性，就可以正常显示水印了。

 let viewport = page.getViewport({ scale: 1.2 });

scale的值可以设置缩放比例，可以根据不同的pdf文件设置，例如word文件转成的pdf，或者ppt转成的pdf，宽高比是不一样的，我需求中的两种文件格式，目前1.2是相对效果最好的。