vue3中实现给pdf加盖公章（手动拖拽公章确认位置）

开发项目时，碰到了一个这样的需求：需要前端从服务器获取到一个pdf文件，然后用户通过手动拖拽公章的方式确认公章应该加盖的位置，然后将位置信息传递给服务器。代码并不是非常完美，仅供大家参考。
引用的两个包版本为

"vue-pdf-embed": "^1.1.5",
"vue3-pdfjs": "^0.1.6",

全部代码实现如下：（为了方便大家查看效果，pdf由用户手动上传得到）

<template><div><!-- 本地上传一个pdf文件用于测试 --><input type="file" id="file-input" multiple  /><div style="position: relative; margin: 0 auto"><div class="control"><span>共{{ numPages }}页</span><el-paginationv-model:current-page="pageNum":page-size="1"backgroundlayout="prev, pager, next, jumper":total="numPages"/></div><div class="all" id="wrap"><!-- 给拖拽存放区添加拖拽存放区事件 --><div class="drag" @drop="drop" @dragover.prevent ref="vuepdf"><vue-pdf-embed:source="source"class="vue-pdf-embed"width="700":style="scaleFun":page="pageNum"/><div:class="['box', item.selectName]"@mousedown="move($event, item)"@contextmenu.prevent="deleteModel(index)"@click="getModel(item)"v-for="(item, index) in dropData":key="index":style="{ left: item.left + 'px', top: item.top + 'px' }">{{ item.name }}{{ item.model }}</div></div></div></div><div><el-buttontype="success"draggable="true"@dragstart="dragstart($event, item)"@dragend="dragend"v-for="(item, index) in dragList":key="index">盖章</el-button><el-button type="primary" @click="submit">保存</el-button><p>请拖拽《盖章》按钮到合同区域，然后移动公章至合适位置，点击《保存》后盖章成功。</p></div></div>
</template><script setup>
/***@date: 2024-08-16*@description: 合同签署-签章**/
import VuePdfEmbed from 'vue-pdf-embed'
import { createLoadingTask } from 'vue3-pdfjs/esm' // 获得总页数
import { getCurrentInstance, ref, computed, onMounted } from 'vue'
import { ElButton } from 'element-plus'const { proxy } = getCurrentInstance()let dropData = ref([])
let dragList = ref([{name: '公章处1',width: 50,height: 50,left: 0,top: 0,type: 4,model: ''}
])let currentItem = ref({})
let x = ref('')
let y = ref('')
let height = ref(0)// 内部移动事件
const move = (e, item) => {const odiv = e.targetconst disX = e.clientX - odiv.offsetLeftconst disY = e.clientY - odiv.offsetTopdocument.onmousemove = (e) => {let left = e.clientX - disXlet top = e.clientY - disYif (top <= 0) {top = 0}if (top >= height.value - 100) {top = height.value - 100}if (left >= 700 - 100) {left = 700 - 100}if (left <= 0) {left = 0}// 拖拽位置设定item.left = leftitem.top = top// 获取位置// 500 容器高度 50 印章一半距离x.value = left + 50y.value = top + 50}document.onmouseup = (e) => {document.onmousemove = nulldocument.onmouseup = null}
}
const dragstart = (e, item) => {e.dataTransfer.setData('item', JSON.stringify(item))if (height.value === 0) {height.value = proxy.$refs['vuepdf'].offsetHeight}
}
const dragend = (e) => {e.dataTransfer.clearData()
}
// 拖拽事件，获取参数
const drop = (e) => {// 获取拖拽对象的参数let data = e.dataTransfer.getData('item')data = JSON.parse(data)// 鼠标落点位置相对于当前拖拽存放地的 x ydata.left = e.layerX - 50data.top = e.layerY - 50// data.top = document.querySelector("#wrap").scrollTop;// 存放到当前拖拽对象生成的列表中// dropData.value.push(data)dropData.value[0] = data //只允许存在一个公章，每次拖拽后都顶替掉第一个章
}
const deleteModel = (index) => {dropData.value.splice(index, 1)
}
// 获取参数
const getModel = (item) => {dropData.value = dropData.value.map((item) => {item.selectName = ''return item})item.selectName = 'select'currentItem.value = item
}//合同初始化，页数
let source = ref('')
let scale = ref(1)
let pageNum = ref(1)
let numPages = ref(0)
const scaleFun = computed(() => {return `transform:scale(${scale.value})`
})const submit = () => {console.log(x.value, y.value)
}const init = () => {document.getElementById('file-input').addEventListener('change', function (e) {let fileList = e.target.fileslet file = fileList[0]source.value = URL.createObjectURL(file)//获取pdf总页数const loadingTask = createLoadingTask(source.value)loadingTask.promise.then((pdf) => {numPages.value = pdf.numPages})})
}onMounted(() => {init()
})
</script><style lang="scss" scoped>
.div {bottom: 20px;position: absolute;left: 50%;margin-left: -152px;
}
.vue-pdf-embed {text-align: center;
}
.all {overflow-y: scroll;height: 650px;
}
.drag {overflow: hidden;width: 700px;height: auto;margin: 0 auto;position: relative;.box {position: absolute;top: 0px;left: 0px;width: 100px;height: 100px;border-radius: 50%;background-size: 100% 100%;border: 3px solid red;user-select: none;cursor: pointer;text-align: center;line-height: 94px;color: red;font-weight: bolder;}.select {border-color: red;}
}
p {font-size: 13px;color: red;margin: 2px 0 0 0;
}
.control {display: flex;justify-content: center;span {line-height: 36px;}
}
</style>