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

pdfjs-dist版本

pnpm i [email protected]

<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 = 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)