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

pdfjs-dist版本

pnpm i pdfjs-dist@2.5.207

<script setup>import{ref, onMounted, watch}from'vue'import{ useRoute }from"vue-router";import*as pdfjsLib from'pdfjs-dist'const route =useRoute()// ！
pdfjsLib.GlobalWorkerOptions.workerSrc =newURL('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 =nulllet isChangeCurrentNum =falseconst query =newURLSearchParams(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 <= numPages.value){togglePage(num)}else{
    inpDisabled.value =false}})asyncfunctiontogglePage(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);});}functiongoToPage(num){
  pdfWrap.scrollTo(0, num ===1?0: pageHeight * num - pageHeight)
  currentNum.value = num
  isChangeCurrentNum =true}functionhandleScroll(e){if(!isChangeCurrentNum){const current = e.target.scrollTop / pageHeight
    currentNum.value = Math.ceil(current ===0?1: current)}
  isChangeCurrentNum =false}functionhandleBeforePage(){
  currentNum.value = currentNum.value -1<=0?1: currentNum.value -1goToPage(currentNum.value)
  isChangeCurrentNum =true}functionhandleNextPage(){
  currentNum.value = currentNum.value +1>= numPages.value ? numPages.value : currentNum.value +1goToPage(currentNum.value)
  isChangeCurrentNum =true}</script><template><div><div class="overflow-y-scroll" id="pdf" style="height: calc(100vh - 60px);" @scroll="handleScroll"><img v-for="src in imgSrcList":src="src" alt=""></div><div v-if="imgSrcList.length !== 0"class="operation-box"><div class="operation"><div class="page-num-info"><span>{{ currentNum }}</span>/<span v-if="!inpDisabled">{{ numPages }}</span><van-loading style="margin-left: 3px;margin-top: 3px" v-else size="14" type="spinner"/></div><van-icon @click="handleBeforePage" name="arrow-left"/><div class="jump-box" v-if="!inpDisabled"><div class="inp-box">
            跳转 <input style="width: 60px;text-align: center;color: black" type="number" v-model="jumpNum"/> 页
          </div><div @click.stop="goToPage(jumpNum)">确定</div></div><div v-elseclass="tips">文件正在加载中..跳转功能暂不可用</div><van-icon @click="handleNextPage" name="arrow"/><van-icon @click="goToPage(1)"class="home" name="wap-home" size="20"/></div></div></div></template><style scoped lang="less">.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;}}}</style>