Compare commits
2 Commits
7a7b464fd6
...
29bbf721dc
| Author | SHA1 | Date | |
|---|---|---|---|
| 29bbf721dc | |||
| 747775a014 |
@@ -1,9 +1,15 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function getStampBase64(data) {
|
||||
export function getStampBase64() {
|
||||
return request({
|
||||
url: '/common/stamp/getStampBase64',
|
||||
method: 'post',
|
||||
data
|
||||
url: '/common/stamp/base64',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export function getStampBase64ByName(fileName) {
|
||||
return request({
|
||||
url: `/common/stamp/base64/${fileName}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
BIN
src/assets/images/stamp.jpg
Normal file
BIN
src/assets/images/stamp.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
76
src/views/flowable/todo/detail/index.vue
Normal file
76
src/views/flowable/todo/detail/index.vue
Normal file
@@ -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);
|
||||
});
|
||||
},
|
||||
Reference in New Issue
Block a user