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).hrefconst 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 = 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.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 <= 0 ? 1 : currentNum.value - 1 goToPage(currentNum.value) isChangeCurrentNum = true}function handleNextPage() { currentNum.value = currentNum.value + 1 >= numPages.value ? numPages.value : currentNum.value + 1 goToPage(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>