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

本文主要是介绍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 = 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 = falseconst 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 <= numPages.value) {togglePage(num)} else {inpDisabled.value = false}
})async function togglePage(pageNumber = 1) {loadingTask.promise.then(function(pdf) {numPages.value = pdf.numPagespdf.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 = numisChangeCurrentNum = true
}function handleScroll(e) {if (!isChangeCurrentNum) {const current = e.target.scrollTop / pageHeightcurrentNum.value = Math.ceil(current === 0 ? 1 : current)}isChangeCurrentNum = false
}function handleBeforePage() {currentNum.value = currentNum.value - 1 <= 0 ? 1 : currentNum.value - 1goToPage(currentNum.value)isChangeCurrentNum = true
}
function handleNextPage() {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-else class="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>