| | |
|---|
| | | <template> |
|---|
| | | <div v-loading="pdfLoading"> |
|---|
| | | <div> |
|---|
| | | <el-dialog |
|---|
| | | v-model="dialogVisible" |
|---|
| | | width="50%" |
|---|
| | |
|---|
| | | :close-on-press-escape="false" |
|---|
| | | :close-on-click-modal="false" |
|---|
| | | class="myCustomDialog" |
|---|
| | | custom-class="pdfDialog" |
|---|
| | | z-index="2010" |
|---|
| | | > |
|---|
| | | <!-- 背景文件切换按钮 --> |
|---|
| | | <div class="top"> |
|---|
| | |
|---|
| | | import { ref, reactive, onMounted,nextTick } from "vue"; |
|---|
| | | import {signArchive} from "@/api/signAgreement/signProject"; |
|---|
| | | import { jsPDF } from "jspdf"; // 导入 jsPDF |
|---|
| | | import {ElMessage, ElMessageBox} from "element-plus"; |
|---|
| | | import {ElMessage, ElMessageBox,ElLoading} from "element-plus"; |
|---|
| | | import {RefreshRight,Delete} from '@element-plus/icons-vue' |
|---|
| | | import * as pdfjsLib from "pdfjs-dist"; |
|---|
| | | import {getToken} from "@/utils/auth"; |
|---|
| | |
|---|
| | | import.meta.url |
|---|
| | | ).href; |
|---|
| | | const dialogVisible = ref(false) |
|---|
| | | const pdfLoading = ref(false) |
|---|
| | | const emit = defineEmits(["getList"]); |
|---|
| | | // 画布引用 |
|---|
| | | const canvasRef = ref(); |
|---|
| | |
|---|
| | | pdfFileUrl.value = import.meta.env.VITE_APP_BASE_API + val.tempFile |
|---|
| | | form.itemId = val.id |
|---|
| | | form.userId = JSON.parse(Cookies.get('userInfo')).userId |
|---|
| | | pdfLoading.value = true |
|---|
| | | await nextTick() |
|---|
| | | pdfLoading.value = true |
|---|
| | | const loadingInstance = ElLoading.service( |
|---|
| | | {target: '.pdfDialog',background: 'rgba(255,255,255,.4)',text: '正在加载文件，请稍后...'} |
|---|
| | | ) |
|---|
| | | const canvas = canvasRef.value; |
|---|
| | | if (canvas) { |
|---|
| | | ctx = canvas.getContext("2d"); |
|---|
| | | // 替换为实际的 PDF 文件地址 |
|---|
| | | console.log("pdfLoading before loadPDF:", pdfLoading.value); |
|---|
| | | await loadPDF(pdfFileUrl.value); |
|---|
| | | console.log("pdfLoading after loadPDF:", pdfLoading.value); |
|---|
| | | loadingInstance.close() |
|---|
| | | // 监听鼠标事件 |
|---|
| | | canvas.addEventListener("mousedown", (e) => { |
|---|
| | | const mouseX = e.offsetX; |
|---|
| | |
|---|
| | | try { |
|---|
| | | const loadingTask = pdfjsLib.getDocument(pdfUrl); |
|---|
| | | const pdf = await loadingTask.promise; |
|---|
| | | console.log("PDF 文件加载成功，总页数:", pdf.numPages); |
|---|
| | | pageNum.value = pdf.numPages |
|---|
| | | // 清空背景图片和签名图列表 |
|---|
| | | backgroundImages.value = []; |
|---|
| | |
|---|
| | | placedSignaturesByBackground.value.push([]); // 为每一页初始化签名图列表 |
|---|
| | | resolve(); |
|---|
| | | }; |
|---|
| | | pdfLoading.value = false |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
