Vue3前端h5移动端页面预览PDF使用pdfjs-dist，添加自定义文本水印

pdfjs-dist版本

pnpm i pdfjs-dist@2.5.207

import {ref, onMounted, watch} from 'vue'
import { useRoute } from "vue-router";
import * as pdfjsLib from 'pdfjs-dist'
const route = useRoute()
// ！
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.js', import.meta.url).href
const numPages = ref(0) // pdf一共多少页
const nums = ref(1) // 循环加载的参数
const currentNum = ref(1) // 当前页数
const jumpNum = ref(1)  // 输入框需要跳转的页数
const inpDisabled = ref(true) // pad文件没有加载完所有页数则禁用
const imgSrcList = ref([]) // 存储paf每一页
const watermarkPoint = [
  [-120, -66], [-120, 66], [120, -66], [120, 66]
] // 水印坐标
let pageHeight = null // 每一页高度
let pdfWrap = null
let isChangeCurrentNum = false
const query = new URLSearchParams(route.fullPath.split('?')[1]) // 从url地址栏获取水印文本信息
const watermarkText = query.get('text') // 自定义的水印文本
// url为pdf链接
const loadingTask = pdfjsLib.getDocument(query.get('url'))
// dom加载之后
onMounted(() => {
  pdfWrap = document.getElementById('pdf')
  togglePage(nums.value)
})
watch(() => nums.value, (num) => {
  if (num 
    togglePage(num)
  } else {
    inpDisabled.value = false
  }
})
async function togglePage(pageNumber = 1) {
  loadingTask.promise.then(function(pdf) {
    numPages.value = pdf.numPages
    pdf.getPage(pageNumber).then((page) = {
      const scale = 0.1 // 关键！如果清晰度不行，慢慢调整这个数值。
      let viewport = page.getViewport({ scale });
      let scaleViewport = page.getViewport({ scale: window.screen.width / viewport.width });
      let canvas = document.createElement('canvas');
      let context = canvas.getContext('2d');
      canvas.width = scaleViewport.width;
      canvas.height = scaleViewport.height;
			
		// 只赋值一次	
      !pageHeight && (pageHeight = (scaleViewport.height * scale).toFixed(2))
      let renderContext = {
        canvasContext: context,
        viewport: scaleViewport,
      };
      let renderTask = page.render(renderContext);
      renderTask.promise.then(() => {
      // 设置自定义文本样式
        context.font = `${16 / scale}px Microsoft Yahei`;
        context.fillStyle = 'rgba(0, 0, 0, .1)'
        context.textAlign = 'center'
        context.textBaseline = 'middle'
		// 设置自定义文本位于每一页pdf的空间位置
        watermarkPoint.forEach(point => {
          context.translate( ((scaleViewport.width * scale / 2) + point[0]) / scale, ((scaleViewport.height * scale / 2) + point[1]) / scale )
          context.rotate(-30 * Math.PI / 180)
          context.fillText(watermarkText, 0, 0)
          context.resetTransform()
        })
		// 导出canvas图片到图片列表，循环渲染
        imgSrcList.value.push(canvas.toDataURL('img/png'))
        nums.value++
      });
    });
  }, function (reason) {
    console.error(reason);
  });
}
function goToPage(num) {
  pdfWrap.scrollTo(0, num === 1 ? 0 : pageHeight * num - pageHeight)
  currentNum.value = num
  isChangeCurrentNum = true
}
function handleScroll(e) {
  if (!isChangeCurrentNum) {
    const current = e.target.scrollTop / pageHeight
    currentNum.value = Math.ceil(current === 0 ? 1 : current)
  }
  isChangeCurrentNum = false
}
function handleBeforePage() {
  currentNum.value = currentNum.value - 1 
  currentNum.value = currentNum.value + 1 = numPages.value ? numPages.value : currentNum.value + 1
  goToPage(currentNum.value)
  isChangeCurrentNum = true
}


  

    

      
    

      

        

          {{ currentNum }}
          /
          {{ numPages }}
          
        
        
        

          

            跳转  页
          
          
确定
        
        
文件正在加载中..跳转功能暂不可用
        
        
      
    
  


.operation-box {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  .operation {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: #404040;
    width: 100%;
    color: #fff;
    padding: 10px 20px;
    border-radius: 30px;
    box-sizing: border-box;
    .jump-box {
      flex: 1;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      .inp-box {
        margin-right: 5px;
      }
    }
    .tips {
      flex: 1;
      text-align: center;
      font-size: 14px;
    }
    .page-num-info {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
    }
    .page-num-info, .home {
      width: 60px;
      text-align: center;
    }
  }
}