diff --git a/src/api/common/stamp.js b/src/api/common/stamp.js new file mode 100644 index 0000000..fc8e67c --- /dev/null +++ b/src/api/common/stamp.js @@ -0,0 +1,15 @@ +import request from '@/utils/request' + +export function getStampBase64() { + return request({ + url: '/common/stamp/base64', + method: 'get' + }) +} + +export function getStampBase64ByName(fileName) { + return request({ + url: `/common/stamp/base64/${fileName}`, + method: 'get' + }) +} diff --git a/src/assets/images/stamp.jpg b/src/assets/images/stamp.jpg new file mode 100644 index 0000000..45a206a Binary files /dev/null and b/src/assets/images/stamp.jpg differ diff --git a/src/views/flowable/todo/detail/index.vue b/src/views/flowable/todo/detail/index.vue new file mode 100644 index 0000000..1a6d14f --- /dev/null +++ b/src/views/flowable/todo/detail/index.vue @@ -0,0 +1,76 @@ +fileUpload() { + // 使用html2canvas将处分决定书卡片内容转换为图片并下载 + import('html2canvas').then((html2canvas) => { + // 优先选择处分决定书的卡片内容,如果找不到再尝试通用的.el-card__body + const element = document.querySelector('.certificate-service .el-card__body') || + document.querySelector('.certificate-service') || + document.querySelector('.el-card__body'); + if (element) { + // 临时隐藏按钮元素 + const button = element.querySelector('button[type="danger"]') || element.querySelector('button[onclick*="fileUpload"]'); + let buttonDisplayStyle = ''; + if (button) { + buttonDisplayStyle = button.style.display; + button.style.display = 'none'; + } + + html2canvas.default(element, { + onclone: function(clonedDoc) { + // 在克隆文档中也隐藏按钮 + const clonedButton = clonedDoc.querySelector('button[type="danger"]') || clonedDoc.querySelector('button[onclick*="fileUpload"]'); + if (clonedButton) { + clonedButton.style.display = 'none'; + } + } + }).then((canvas) => { + // 创建一个新的canvas用于添加水印 + const watermarkedCanvas = document.createElement('canvas'); + const ctx = watermarkedCanvas.getContext('2d'); + watermarkedCanvas.width = canvas.width; + watermarkedCanvas.height = canvas.height; + + // 绘制原始canvas内容 + ctx.drawImage(canvas, 0, 0); + + // 使用平铺水印块,避免文字重叠并降低透明度 + const watermarkCanvas = this.createWatermarkCanvas(this.globalWatermarkText, { + width: 320, + height: 220, + angle: -25, + fontSize: 22, + alpha: 0.3 + }) + if (watermarkCanvas) { + ctx.save() + const pattern = ctx.createPattern(watermarkCanvas, 'repeat') + if (pattern) { + ctx.fillStyle = pattern + ctx.fillRect(0, 0, watermarkedCanvas.width, watermarkedCanvas.height) + } + ctx.restore() + } + + // 创建下载链接 + const link = document.createElement('a'); + link.download = '处分决定送达书.png'; // 更具描述性的文件名 + link.href = watermarkedCanvas.toDataURL('image/png'); + link.click(); + + // 恢复按钮显示 + if (button) { + button.style.display = buttonDisplayStyle; + } + }).catch(err => { + // 如果截图过程中出错,也要恢复按钮显示 + if (button) { + button.style.display = buttonDisplayStyle; + } + console.error('截图失败:', err); + }); + } else { + console.error('找不到需要截图的元素'); + } + }).catch((error) => { + console.error('html2canvas 加载失败:', error); + }); + }, \ No newline at end of file