|
|
@@ -1,8 +1,7 @@
|
|
|
import { getArrValue, getRandom, isNullES, isNumber, isString } from 'js-fast-way'
|
|
|
|
|
|
-//PDF签章
|
|
|
+// PDF签章类
|
|
|
export default class HcPdfSign {
|
|
|
-
|
|
|
static iframeDom = null
|
|
|
static pdfViewer = null
|
|
|
static signImgCss = {}
|
|
|
@@ -18,26 +17,57 @@ export default class HcPdfSign {
|
|
|
|
|
|
/**
|
|
|
* 初始化创建PDF预览
|
|
|
- * @param ele 元素的ref，或id值
|
|
|
- * @param url pdf的url
|
|
|
- * @param img 签章图片url
|
|
|
- * @param func 回调函数
|
|
|
+ * @param {Object} options 配置选项
|
|
|
+ * @param {HTMLElement|string} options.ele 元素的ref，或id值
|
|
|
+ * @param {string} options.url PDF的url
|
|
|
+ * @param {string} options.img 签章图片url
|
|
|
+ * @param {Function} options.change 回调函数
|
|
|
+ * @param {Function} options.load 加载完成回调函数
|
|
|
+ * @param {boolean} options.isShowYinzhang 是否显示印章
|
|
|
*/
|
|
|
static createPdf({ ele, url, img, change, load, isShowYinzhang }) {
|
|
|
this.initVarNull()
|
|
|
- //判断参数是否合法
|
|
|
+ const dom = this.getDomElement(ele)
|
|
|
+ if (!dom) return false
|
|
|
+
|
|
|
+ if (isNullES(url)) {
|
|
|
+ console.warn('请传入PDF的url参数')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+
|
|
|
+ this.createIframe(dom, url, isShowYinzhang)
|
|
|
+
|
|
|
+ if (isNullES(img)) {
|
|
|
+ console.warn('请传入签章图片')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ this.signImage(img)
|
|
|
+
|
|
|
+ if (!isNullES(change)) {
|
|
|
+ this.addEventFunc(change)
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!isNullES(load)) {
|
|
|
+ this.addPdfLoadFunc(load)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 获取DOM元素
|
|
|
+ static getDomElement(ele) {
|
|
|
if (isNullES(ele)) {
|
|
|
console.warn('请传入参数，必须是，ref的dom元素，或id值')
|
|
|
- return false
|
|
|
+ return null
|
|
|
}
|
|
|
- //是否为字符串或数值类型
|
|
|
- let dom = null, errTip = 'ele参数不合法，必须是ref的dom元素，或id值'
|
|
|
+
|
|
|
+ let dom = null
|
|
|
+ const errTip = 'ele参数不合法，必须是ref的dom元素，或id值'
|
|
|
+
|
|
|
if (isString(ele) || isNumber(ele)) {
|
|
|
try {
|
|
|
dom = document.getElementById(ele)
|
|
|
} catch (e) {
|
|
|
console.error(errTip)
|
|
|
- return false
|
|
|
+ return null
|
|
|
}
|
|
|
} else {
|
|
|
try {
|
|
|
@@ -46,28 +76,33 @@ export default class HcPdfSign {
|
|
|
dom = ele
|
|
|
} else {
|
|
|
console.error(errTip)
|
|
|
- return false
|
|
|
+ return null
|
|
|
}
|
|
|
} catch (e) {
|
|
|
console.error(errTip)
|
|
|
- return false
|
|
|
+ return null
|
|
|
}
|
|
|
}
|
|
|
- //清空dom
|
|
|
+
|
|
|
+ this.clearDomChildren(dom)
|
|
|
+ return dom
|
|
|
+ }
|
|
|
+
|
|
|
+ // 清空DOM子元素
|
|
|
+ static clearDomChildren(dom) {
|
|
|
const children = dom.children
|
|
|
if (children.length > 0) {
|
|
|
for (let i = children.length - 1; i >= 0; i--) {
|
|
|
dom.removeChild(children[i])
|
|
|
}
|
|
|
}
|
|
|
- if (isNullES(url)) {
|
|
|
- console.warn('请传入Pdf的url参数')
|
|
|
- return false
|
|
|
- }
|
|
|
- //创建iframe
|
|
|
+ }
|
|
|
+
|
|
|
+ // 创建iframe
|
|
|
+ static createIframe(dom, url, isShowYinzhang) {
|
|
|
const iframe = document.createElement('iframe')
|
|
|
iframe.setAttribute('id', 'pdf-sign-' + getRandom(6))
|
|
|
- iframe.src = `/plugins/pdfjs/sign/web/viewer.html?file=${url}#zoom=100`
|
|
|
+ iframe.src = `/plugins/pdfjs/sign/web/viewer.html?file=${encodeURIComponent(url)}#zoom=100`
|
|
|
iframe.style.width = '100%'
|
|
|
iframe.style.height = '100%'
|
|
|
iframe.style.border = '1px solid #ccc'
|
|
|
@@ -77,23 +112,9 @@ export default class HcPdfSign {
|
|
|
})
|
|
|
dom.appendChild(iframe)
|
|
|
this.iframeDom = iframe
|
|
|
- //设置签章图片
|
|
|
- if (isNullES(img)) {
|
|
|
- console.warn('请传入签章图片')
|
|
|
- return false
|
|
|
- }
|
|
|
- this.signImage(img).then()
|
|
|
- //设置回调事件
|
|
|
- if (!isNullES(change)) {
|
|
|
- this.addEventFunc(change)
|
|
|
- }
|
|
|
- //设置回调事件
|
|
|
- if (!isNullES(load)) {
|
|
|
- this.addPdfLoadFunc(load)
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
- //初始化空值
|
|
|
+ // 初始化变量
|
|
|
static initVarNull() {
|
|
|
this.iframeDom = null
|
|
|
this.pdfViewer = null
|
|
|
@@ -108,45 +129,39 @@ export default class HcPdfSign {
|
|
|
this.signNum = 0
|
|
|
}
|
|
|
|
|
|
- //设置回调事件
|
|
|
+ // 设置回调事件
|
|
|
static addEventFunc(func) {
|
|
|
if (typeof func !== 'function') {
|
|
|
console.warn('请传入函数')
|
|
|
return false
|
|
|
- } else {
|
|
|
- this.signChange = func
|
|
|
}
|
|
|
+ this.signChange = func
|
|
|
}
|
|
|
|
|
|
- //触发回调事件
|
|
|
+ // 触发回调事件
|
|
|
static signChangeFunc() {
|
|
|
- if (typeof this.signChange !== 'function') {
|
|
|
- return false
|
|
|
- } else {
|
|
|
+ if (typeof this.signChange === 'function') {
|
|
|
this.signChange(this.signList)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- //设置加载完成的回调事件
|
|
|
+ // 设置加载完成的回调事件
|
|
|
static addPdfLoadFunc(func) {
|
|
|
if (typeof func !== 'function') {
|
|
|
console.warn('请传入函数')
|
|
|
return false
|
|
|
- } else {
|
|
|
- this.pdfLoadFunc = func
|
|
|
}
|
|
|
+ this.pdfLoadFunc = func
|
|
|
}
|
|
|
|
|
|
- //加载完成
|
|
|
+ // 加载完成
|
|
|
static setPdfLoadFunc(val) {
|
|
|
- if (typeof this.pdfLoadFunc !== 'function') {
|
|
|
- return false
|
|
|
- } else {
|
|
|
+ if (typeof this.pdfLoadFunc === 'function') {
|
|
|
this.pdfLoadFunc(val)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- //设置签章图片
|
|
|
+ // 设置签章图片
|
|
|
static async signImage(url) {
|
|
|
const res = await this.getImageSize(url)
|
|
|
if (res.width === res.height) {
|
|
|
@@ -162,22 +177,23 @@ export default class HcPdfSign {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- //获取网络图片的高宽
|
|
|
- static async getImageSize(url) {
|
|
|
+ // 获取网络图片的高宽
|
|
|
+ static getImageSize(url) {
|
|
|
return new Promise((resolve) => {
|
|
|
let img = new Image()
|
|
|
img.onload = function () {
|
|
|
- let width = img.width
|
|
|
- let height = img.height
|
|
|
- resolve({ width, height })
|
|
|
+ resolve({ width: img.width, height: img.height })
|
|
|
+ }
|
|
|
+ img.onerror = function () {
|
|
|
+ console.error('图片加载失败')
|
|
|
+ resolve({ width: 0, height: 0 })
|
|
|
}
|
|
|
img.src = url
|
|
|
})
|
|
|
}
|
|
|
|
|
|
- //创建签章图片
|
|
|
- static async createSignImage(event) {
|
|
|
- //创建图片元素
|
|
|
+ // 创建签章图片
|
|
|
+ static createSignImage(event) {
|
|
|
const { url, width, height } = this.signImgCss
|
|
|
const uuid = 'pdf-sign-img-' + getRandom(6)
|
|
|
const signImg = document.createElement('img')
|
|
|
@@ -189,21 +205,20 @@ export default class HcPdfSign {
|
|
|
signImg.style.left = (event.layerX - (width / 2)) + 'px'
|
|
|
signImg.style.top = (event.layerY - (height / 2)) + 'px'
|
|
|
signImg.style.pointerEvents = 'auto'
|
|
|
- signImg.style.zIndex = 999
|
|
|
+ signImg.style.zIndex = '999'
|
|
|
return signImg
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
- * 是否批量签章
|
|
|
- * @param val true/false
|
|
|
+ * 设置是否批量签章
|
|
|
+ * @param {boolean} val 是否批量签章
|
|
|
*/
|
|
|
static setBatchSign(val = false) {
|
|
|
- console.log('111', val)
|
|
|
this.batchSign = val
|
|
|
this.setPageScrolling()
|
|
|
}
|
|
|
|
|
|
- //让PDF页面全部渲染一下
|
|
|
+ // 让PDF页面全部渲染一下
|
|
|
static async setPageScrolling() {
|
|
|
const pageDom = this.pdfViewer?.children ?? []
|
|
|
await this.toPdfPage('firstPage')
|
|
|
@@ -215,9 +230,9 @@ export default class HcPdfSign {
|
|
|
|
|
|
/**
|
|
|
* 跳转pdf的页面
|
|
|
- * @param pageId 最后一页：lastPage，第一页：firstPage，上一页：previous，下一页：next
|
|
|
+ * @param {string} pageId 最后一页：lastPage，第一页：firstPage，上一页：previous，下一页：next
|
|
|
*/
|
|
|
- static async toPdfPage(pageId) {
|
|
|
+ static toPdfPage(pageId) {
|
|
|
return new Promise((resolve) => {
|
|
|
this.iframeDom?.contentDocument?.getElementById(pageId)?.click()
|
|
|
setTimeout(() => {
|
|
|
@@ -226,138 +241,197 @@ export default class HcPdfSign {
|
|
|
})
|
|
|
}
|
|
|
|
|
|
- //PDF加载完成
|
|
|
+ // PDF加载完成
|
|
|
static iframeLoad(isShowYinzhang) {
|
|
|
const viewer = this.iframeDom?.contentDocument?.getElementById('viewer')
|
|
|
+ if (!viewer) {
|
|
|
+ console.error('无法获取PDF查看器元素')
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
if (isShowYinzhang) {
|
|
|
viewer.classList.add('stamp-cursor')
|
|
|
}
|
|
|
|
|
|
- //页面被点击
|
|
|
- viewer.addEventListener('click', (event) => {
|
|
|
- this.viewerClick(event).then()
|
|
|
- })
|
|
|
- //鼠标移动
|
|
|
- viewer.addEventListener('mousemove', (event) => {
|
|
|
- event.preventDefault()
|
|
|
- if (this.signType !== '移动' || !this.curSignDom) {
|
|
|
- return
|
|
|
- }
|
|
|
- //鼠标位置
|
|
|
- const left = (event.clientX - this.disX) + 'px'
|
|
|
- const top = (event.clientY - this.disY) + 'px'
|
|
|
- this.curSignDom.style.left = left
|
|
|
- this.curSignDom.style.top = top
|
|
|
- //批量处理
|
|
|
- if (this.batchSign) {
|
|
|
- const curDom = this.curSignDom
|
|
|
- let { data: curSign } = this.getSignImgDom(curDom)
|
|
|
- if (!curSign) return
|
|
|
- const newArr = this.signList.filter(item => {
|
|
|
- return item.type === curSign.type
|
|
|
- })
|
|
|
- newArr.forEach(item => {
|
|
|
- item.dom.style.left = left
|
|
|
- item.dom.style.top = top
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- //鼠标抬起
|
|
|
- viewer.addEventListener('mouseup', () => {
|
|
|
- if (!this.curSignDom) return
|
|
|
- this.signType = '签名'
|
|
|
- this.curSignDom.style.cursor = 'default'
|
|
|
- const curDom = this.curSignDom
|
|
|
- //获取数据
|
|
|
- let { data: curSign } = this.getSignImgDom(curDom)
|
|
|
- if (!curSign) return
|
|
|
- //计算坐标
|
|
|
- const left = curDom.style.left.replace('px', '')
|
|
|
- const top = curDom.style.top.replace('px', '')
|
|
|
- const { width, height } = this.signImgCss
|
|
|
- const lefts = Number(left) + Number(width / 2)
|
|
|
- const tops = Number(top) + Number(height / 2)
|
|
|
- const lx = ((lefts * 100) / curDom.parentNode.clientWidth).toFixed(4)
|
|
|
- const ly = ((tops * 100) / curDom.parentNode.clientHeight).toFixed(4)
|
|
|
- //批量处理
|
|
|
+ viewer.addEventListener('click', (event) => this.viewerClick(event))
|
|
|
+ viewer.addEventListener('mousemove', (event) => this.viewerMouseMove(event))
|
|
|
+ viewer.addEventListener('mouseup', () => this.viewerMouseUp())
|
|
|
+
|
|
|
+ const container = this.iframeDom?.contentDocument?.getElementById('outerContainer')
|
|
|
+ if (container) {
|
|
|
+ container.addEventListener('keyup', (event) => this.containerKeyUp(event))
|
|
|
+ }
|
|
|
+
|
|
|
+ this.pdfViewer = viewer
|
|
|
+ this.handlePdfRendering()
|
|
|
+ }
|
|
|
+
|
|
|
+ // 处理PDF渲染
|
|
|
+ static handlePdfRendering() {
|
|
|
+ setTimeout(async () => {
|
|
|
if (this.batchSign) {
|
|
|
- const newArr = this.signList.filter(item => {
|
|
|
- return item.type === curSign.type
|
|
|
- })
|
|
|
- newArr.forEach(item => {
|
|
|
- item.lx = lx
|
|
|
- item.ly = ly
|
|
|
- item.width = curDom.clientWidth
|
|
|
- item.height = curDom.clientHeight
|
|
|
- })
|
|
|
- } else {
|
|
|
- curSign.lx = lx
|
|
|
- curSign.ly = ly
|
|
|
- curSign.width = curDom.clientWidth
|
|
|
- curSign.height = curDom.clientHeight
|
|
|
+ await this.setPageScrolling()
|
|
|
}
|
|
|
- this.signChangeFunc()
|
|
|
- })
|
|
|
- //监听按键
|
|
|
- const container = this.iframeDom?.contentDocument?.getElementById('outerContainer')
|
|
|
- container.addEventListener('keyup', (event) => {
|
|
|
- //删除签章
|
|
|
- if (event.keyCode === 8 && event.key === 'Backspace') {
|
|
|
- const curDom = this.curSignDom
|
|
|
- const { index } = this.getSignImgDom(curDom)
|
|
|
- if (index <= -1) return
|
|
|
- this.delSignImg(index).then()
|
|
|
+ this.setPdfLoadFunc(true)
|
|
|
+ }, this.batchSign ? 500 : 100)
|
|
|
+ }
|
|
|
+
|
|
|
+ // 查看器点击事件
|
|
|
+ static async viewerClick(event) {
|
|
|
+ const target = event.target
|
|
|
+ if (this.signType === '移动' || target.className !== 'textLayer') {
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ this.signNum++
|
|
|
+ if (this.batchSign) {
|
|
|
+ const parent = target?.parentNode?.parentNode?.children ?? []
|
|
|
+ for (let i = 0; i < parent.length; i++) {
|
|
|
+ await this.setPdfNodeSign(parent[i], parent[i]?.children[1], event)
|
|
|
}
|
|
|
+ } else {
|
|
|
+ await this.setPdfNodeSign(target?.parentNode, target, event)
|
|
|
+ }
|
|
|
+ this.signChangeFunc()
|
|
|
+ }
|
|
|
+
|
|
|
+ // 查看器鼠标移动事件
|
|
|
+ static viewerMouseMove(event) {
|
|
|
+ event.preventDefault()
|
|
|
+ if (this.signType !== '移动' || !this.curSignDom) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ const left = (event.clientX - this.disX) + 'px'
|
|
|
+ const top = (event.clientY - this.disY) + 'px'
|
|
|
+ this.curSignDom.style.left = left
|
|
|
+ this.curSignDom.style.top = top
|
|
|
+
|
|
|
+ if (this.batchSign) {
|
|
|
+ this.updateBatchSignPositions(left, top)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 更新批量签章位置
|
|
|
+ static updateBatchSignPositions(left, top) {
|
|
|
+ const { data: curSign } = this.getSignImgDom(this.curSignDom)
|
|
|
+ if (!curSign) return
|
|
|
+
|
|
|
+ const newArr = this.signList.filter(item => item.type === curSign.type)
|
|
|
+ newArr.forEach(item => {
|
|
|
+ item.dom.style.left = left
|
|
|
+ item.dom.style.top = top
|
|
|
})
|
|
|
- this.pdfViewer = viewer
|
|
|
- //处理pdf渲染
|
|
|
+ }
|
|
|
+
|
|
|
+ // 查看器鼠标抬起事件
|
|
|
+ static viewerMouseUp() {
|
|
|
+ if (!this.curSignDom) return
|
|
|
+
|
|
|
+ this.signType = '签名'
|
|
|
+ this.curSignDom.style.cursor = 'default'
|
|
|
+
|
|
|
+ const { data: curSign } = this.getSignImgDom(this.curSignDom)
|
|
|
+ if (!curSign) return
|
|
|
+
|
|
|
+ const { left, top } = this.calculatePosition(this.curSignDom)
|
|
|
+
|
|
|
if (this.batchSign) {
|
|
|
- setTimeout(async () => {
|
|
|
- await this.setPageScrolling()
|
|
|
- this.setPdfLoadFunc(true)
|
|
|
- }, 500)
|
|
|
+ this.updateBatchSignData(curSign, left, top)
|
|
|
} else {
|
|
|
- setTimeout(async () => {
|
|
|
- this.setPdfLoadFunc(true)
|
|
|
- }, 100)
|
|
|
+ this.updateSignData(curSign, left, top)
|
|
|
+ }
|
|
|
+
|
|
|
+ this.signChangeFunc()
|
|
|
+ }
|
|
|
+
|
|
|
+ // 计算位置
|
|
|
+ static calculatePosition(dom) {
|
|
|
+ const left = parseFloat(dom.style.left)
|
|
|
+ const top = parseFloat(dom.style.top)
|
|
|
+ const { width, height } = this.signImgCss
|
|
|
+ const lefts = left + width / 2
|
|
|
+ const tops = top + height / 2
|
|
|
+ const lx = ((lefts * 100) / dom.parentNode.clientWidth).toFixed(4)
|
|
|
+ const ly = ((tops * 100) / dom.parentNode.clientHeight).toFixed(4)
|
|
|
+ return { lx, ly }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 更新批量签章数据
|
|
|
+ static updateBatchSignData(curSign, lx, ly) {
|
|
|
+ const newArr = this.signList.filter(item => item.type === curSign.type)
|
|
|
+ newArr.forEach(item => {
|
|
|
+ item.lx = lx
|
|
|
+ item.ly = ly
|
|
|
+ item.width = this.curSignDom.clientWidth
|
|
|
+ item.height = this.curSignDom.clientHeight
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 更新签章数据
|
|
|
+ static updateSignData(curSign, lx, ly) {
|
|
|
+ curSign.lx = lx
|
|
|
+ curSign.ly = ly
|
|
|
+ curSign.width = this.curSignDom.clientWidth
|
|
|
+ curSign.height = this.curSignDom.clientHeight
|
|
|
+ }
|
|
|
+
|
|
|
+ // 容器键盘抬起事件
|
|
|
+ static containerKeyUp(event) {
|
|
|
+ if (event.key === 'Backspace') {
|
|
|
+ const { index } = this.getSignImgDom(this.curSignDom)
|
|
|
+ if (index > -1) {
|
|
|
+ this.delSignImg(index)
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- //删除签章
|
|
|
+ // 删除签章
|
|
|
static async delSignImg(index) {
|
|
|
if (index <= -1) return
|
|
|
+
|
|
|
if (this.batchSign) {
|
|
|
- const list = this.signList, curDom = list[index]
|
|
|
- //倒序删除签章
|
|
|
- for (let i = list.length - 1; i >= 0; i--) {
|
|
|
- if (list[i].type === curDom.type) {
|
|
|
- list[i].dom.remove()
|
|
|
- delete list[i].dom
|
|
|
- list.splice(i, 1)
|
|
|
- }
|
|
|
- }
|
|
|
- this.signList = list
|
|
|
- this.signChangeFunc()
|
|
|
+ this.deleteBatchSign(index)
|
|
|
} else {
|
|
|
- this.signList[index].dom.remove()
|
|
|
- this.signList.splice(index, 1)
|
|
|
- this.signChangeFunc()
|
|
|
+ this.deleteSingleSign(index)
|
|
|
+ }
|
|
|
+
|
|
|
+ this.signChangeFunc()
|
|
|
+ }
|
|
|
+
|
|
|
+ // 删除批量签章
|
|
|
+ static deleteBatchSign(index) {
|
|
|
+ const list = this.signList
|
|
|
+ const curDom = list[index]
|
|
|
+ for (let i = list.length - 1; i >= 0; i--) {
|
|
|
+ if (list[i].type === curDom.type) {
|
|
|
+ list[i].dom.remove()
|
|
|
+ delete list[i].dom
|
|
|
+ list.splice(i, 1)
|
|
|
+ }
|
|
|
}
|
|
|
+ this.signList = list
|
|
|
}
|
|
|
|
|
|
+ // 删除单个签章
|
|
|
+ static deleteSingleSign(index) {
|
|
|
+ this.signList[index].dom.remove()
|
|
|
+ this.signList.splice(index, 1)
|
|
|
+ }
|
|
|
|
|
|
- //获取签章图片的数据
|
|
|
+ // 获取签章图片的数据
|
|
|
static getSignImgDom(curDom) {
|
|
|
if (isNullES(curDom)) {
|
|
|
return { data: null, index: -1 }
|
|
|
}
|
|
|
- //获取数据
|
|
|
+
|
|
|
const id = curDom?.getAttribute('id')
|
|
|
let curSign = null, index = -1
|
|
|
for (let i = 0; i < this.signList.length; i++) {
|
|
|
const item = this.signList[i]
|
|
|
if (item.id === id) {
|
|
|
curSign = item
|
|
|
+ // 获取签章图片的数据（续）
|
|
|
index = i
|
|
|
break
|
|
|
}
|
|
|
@@ -365,57 +439,45 @@ export default class HcPdfSign {
|
|
|
return { data: curSign, index }
|
|
|
}
|
|
|
|
|
|
- //页面被点击
|
|
|
- static async viewerClick(event) {
|
|
|
- const target = event.target
|
|
|
- //当前为移动模式
|
|
|
- if (this.signType === '移动') {
|
|
|
- return
|
|
|
- }
|
|
|
- //不在PDF页面上点击
|
|
|
- if (target.className !== 'textLayer') {
|
|
|
- return
|
|
|
- }
|
|
|
- //批量签章
|
|
|
- this.signNum ++
|
|
|
- console.log(this.batchSign)
|
|
|
- if (this.batchSign) {
|
|
|
- const parent = target?.parentNode?.parentNode?.children ?? []
|
|
|
- console.log(parent)
|
|
|
- for (let i = 0; i < parent.length; i++) {
|
|
|
- await this.setPdfNodeSign(parent[i], parent[i]?.children[1], event)
|
|
|
- }
|
|
|
- this.signChangeFunc()
|
|
|
- } else {
|
|
|
- await this.setPdfNodeSign(target?.parentNode, target, event)
|
|
|
- this.signChangeFunc()
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- //设置PDF节点签章
|
|
|
+ // 设置PDF节点签章
|
|
|
static async setPdfNodeSign(node, textLayer, event) {
|
|
|
if (isNullES(node) || isNullES(textLayer) || isNullES(event)) {
|
|
|
return
|
|
|
}
|
|
|
|
|
|
- // if (node.children.length < 3) {
|
|
|
- // node.prepend('<div class="signLayer" style="position: absolute;height: 100%;width: 100%;z-index: 999;pointer-events: none;overflow: hidden"></div>')
|
|
|
- // }
|
|
|
- //插入图片
|
|
|
+ // 确保有一个容器来放置签名
|
|
|
+ if (node.children.length < 3) {
|
|
|
+ const signLayer = document.createElement('div')
|
|
|
+ signLayer.className = 'signLayer'
|
|
|
+ signLayer.style.cssText = 'position: absolute;height: 100%;width: 100%;z-index: 999;pointer-events: none;overflow: hidden'
|
|
|
+ node.insertBefore(signLayer, node.firstChild)
|
|
|
+ }
|
|
|
+
|
|
|
+ // 插入图片
|
|
|
const signImgDom = await this.createSignImage(event)
|
|
|
- node.children[0].append(signImgDom)
|
|
|
- //鼠标按下
|
|
|
- signImgDom.addEventListener('mousedown', (e) => {
|
|
|
- //新的当前选中项
|
|
|
- this.curSignDom = e.target
|
|
|
- this.signType = '移动'
|
|
|
- e.target.style.cursor = 'move'
|
|
|
- //鼠标相对于图片的位置
|
|
|
- this.disX = e.clientX - e.target.offsetLeft
|
|
|
- this.disY = e.clientY - e.target.offsetTop
|
|
|
- })
|
|
|
- //保存签章信息
|
|
|
- this.signList.push({
|
|
|
+ node.children[0].appendChild(signImgDom)
|
|
|
+
|
|
|
+ // 添加鼠标按下事件监听器
|
|
|
+ signImgDom.addEventListener('mousedown', this.handleSignImgMouseDown.bind(this))
|
|
|
+
|
|
|
+ // 保存签章信息
|
|
|
+ this.signList.push(this.createSignInfo(node, textLayer, event, signImgDom))
|
|
|
+
|
|
|
+ return signImgDom
|
|
|
+ }
|
|
|
+
|
|
|
+ // 处理签名图片的鼠标按下事件
|
|
|
+ static handleSignImgMouseDown(e) {
|
|
|
+ this.curSignDom = e.target
|
|
|
+ this.signType = '移动'
|
|
|
+ e.target.style.cursor = 'move'
|
|
|
+ this.disX = e.clientX - e.target.offsetLeft
|
|
|
+ this.disY = e.clientY - e.target.offsetTop
|
|
|
+ }
|
|
|
+
|
|
|
+ // 创建签名信息对象
|
|
|
+ static createSignInfo(node, textLayer, event, signImgDom) {
|
|
|
+ return {
|
|
|
type: this.signNum,
|
|
|
url: this.signImgCss?.url ?? '',
|
|
|
page: node.getAttribute('data-page-number'),
|
|
|
@@ -425,43 +487,27 @@ export default class HcPdfSign {
|
|
|
width: signImgDom.clientWidth,
|
|
|
height: signImgDom.clientHeight,
|
|
|
dom: signImgDom,
|
|
|
- })
|
|
|
- return signImgDom
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- //设置PDF签章图片
|
|
|
+ // 设置PDF签章图片
|
|
|
static async setPdfSignImg(arr) {
|
|
|
const list = getArrValue(arr)
|
|
|
if (list.length <= 0) return
|
|
|
+
|
|
|
const pageDom = this.pdfViewer?.children ?? []
|
|
|
- for (let i = 0; i < list.length; i++) {
|
|
|
- const page = Number(list[i].page) - 1
|
|
|
+ for (const item of list) {
|
|
|
+ const page = Number(item.page) - 1
|
|
|
const dom = pageDom[page]?.getElementsByClassName('canvasWrapper')[0]
|
|
|
- //创建图片元素
|
|
|
- const signImg = document.createElement('img')
|
|
|
- signImg.setAttribute('id', list[i].id)
|
|
|
- signImg.src = list[i].url
|
|
|
- signImg.style.position = 'absolute'
|
|
|
- signImg.style.width = list[i].dom.style.width
|
|
|
- signImg.style.height = list[i].dom.style.height
|
|
|
- signImg.style.left = list[i].dom.style.left
|
|
|
- signImg.style.top = list[i].dom.style.top
|
|
|
- signImg.style.pointerEvents = 'auto'
|
|
|
- signImg.style.zIndex = 999
|
|
|
- dom.append(signImg)
|
|
|
- //鼠标按下
|
|
|
- signImg.addEventListener('mousedown', (e) => {
|
|
|
- //新的当前选中项
|
|
|
- this.curSignDom = e.target
|
|
|
- this.signType = '移动'
|
|
|
- e.target.style.cursor = 'move'
|
|
|
- //鼠标相对于图片的位置
|
|
|
- this.disX = e.clientX - e.target.offsetLeft
|
|
|
- this.disY = e.clientY - e.target.offsetTop
|
|
|
- })
|
|
|
- //保存签章信息
|
|
|
+ if (!dom) continue
|
|
|
+
|
|
|
+ const signImg = this.createSignImgElement(item)
|
|
|
+ dom.appendChild(signImg)
|
|
|
+
|
|
|
+ signImg.addEventListener('mousedown', this.handleSignImgMouseDown.bind(this))
|
|
|
+
|
|
|
this.signList.push({
|
|
|
- ...list[i],
|
|
|
+ ...item,
|
|
|
width: signImg.clientWidth,
|
|
|
height: signImg.clientHeight,
|
|
|
dom: signImg,
|
|
|
@@ -469,4 +515,20 @@ export default class HcPdfSign {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ // 创建签名图片元素
|
|
|
+ static createSignImgElement(item) {
|
|
|
+ const signImg = document.createElement('img')
|
|
|
+ signImg.setAttribute('id', item.id)
|
|
|
+ signImg.src = item.url
|
|
|
+ signImg.style.cssText = `
|
|
|
+ position: absolute;
|
|
|
+ width: ${item.dom.style.width};
|
|
|
+ height: ${item.dom.style.height};
|
|
|
+ left: ${item.dom.style.left};
|
|
|
+ top: ${item.dom.style.top};
|
|
|
+ pointer-events: auto;
|
|
|
+ z-index: 999;
|
|
|
+ `
|
|
|
+ return signImg
|
|
|
+ }
|
|
|
}
|
