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)