DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更正前端内容

Browse Source
This commit is contained in:
86156
2026-01-09 13:58:34 +08:00
parent 82cac87ffb
commit ab528e6c32
1 changed files with 110 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
klp-ui/src/views/wms/coil/panels/LabelRender/index.vue
View File

@@ -76,7 +76,8 @@ export default {
// -------- 重构后的打印方法（核心优化） --------
async printLabel() {
// 1. 获取标签容器DOM
const labelContainer = document.querySelector('.label-container');
const labelContainer = document.querySelector('.label-container') ||
document.querySelector('.material-label-container');
if (!labelContainer) {
Message.error('未找到标签容器，无法打印');
return;
@@ -88,67 +89,149 @@ export default {
// 2. 等待二维码/字体等资源加载完成（复用之前的等待逻辑）
await this.waitForAllResources(labelContainer);
// 3. 用html2canvas生成高清Canvas（解决文字模糊+二维码丢失）
// 3. 计算纸张尺寸和缩放比例
// 纸张尺寸：180mm x 100mm
// 1mm ≈ 3.779527559px (96 DPI)
const paperWidthMm = 180;
const paperHeightMm = 100;
const dpi = 96;
const mmToPx = dpi / 25.4;
const paperWidthPx = paperWidthMm * mmToPx; // 约 680.3px
const paperHeightPx = paperHeightMm * mmToPx; // 约 377.95px
// 获取标签容器的实际尺寸
const containerRect = labelContainer.getBoundingClientRect();
const containerWidth = containerRect.width;
const containerHeight = containerRect.height;
// 计算缩放比例，确保内容适配到纸张（留出2mm边距）
const marginMm = 2;
const marginPx = marginMm * mmToPx;
const availableWidth = paperWidthPx - marginPx * 2;
const availableHeight = paperHeightPx - marginPx * 2;
const scaleX = containerWidth > 0 ? availableWidth / containerWidth : 1;
const scaleY = containerHeight > 0 ? availableHeight / containerHeight : 1;
const printScale = Math.min(scaleX, scaleY, 1); // 不超过1，不放大
// 计算最终Canvas尺寸（适配纸张）
const finalCanvasWidth = containerWidth * printScale;
const finalCanvasHeight = containerHeight * printScale;
// 使用合适的scale值生成高清Canvas（但不超过纸张尺寸）
const canvasScale = Math.min(1.5, printScale * 1.5); // 确保不超过纸张
// 4. 用html2canvas生成高清Canvas（解决文字模糊+二维码丢失）
const canvas = await html2canvas(labelContainer, {
scale: 1.5, // 3倍高清渲染（核心）
scale: canvasScale,
backgroundColor: '#ffffff', // 强制白色背景，避免打印时背景透明
useCORS: true, // 支持跨域图片
allowTaint: true, // 允许渲染canvas（二维码）
taintTest: false, // 关闭canvas污染检测
windowWidth: labelContainer.offsetWidth * 1.5, // 适配缩放后的宽度
windowHeight: labelContainer.offsetHeight * 1.5, // 适配缩放后的高度
width: containerWidth,
height: containerHeight,
logging: false,
});
// 4. 创建临时打印容器（避免影响原DOM）
// 5. 如果Canvas尺寸超出纸张，需要缩放Canvas
let finalCanvas = canvas;
if (canvas.width > paperWidthPx || canvas.height > paperHeightPx) {
// 创建新的Canvas，尺寸适配纸张
const scaledCanvas = document.createElement('canvas');
scaledCanvas.width = Math.min(canvas.width, paperWidthPx);
scaledCanvas.height = Math.min(canvas.height, paperHeightPx);
const ctx = scaledCanvas.getContext('2d');
ctx.drawImage(canvas, 0, 0, scaledCanvas.width, scaledCanvas.height);
finalCanvas = scaledCanvas;
}
// 6. 创建临时打印容器（避免影响原DOM）
const printContainerId = 'temp-print-container-' + new Date().getTime();
const tempPrintContainer = document.createElement('div');
tempPrintContainer.id = printContainerId;
// 将高清Canvas插入临时容器
tempPrintContainer.appendChild(canvas);
// document.body.appendChild(tempPrintContainer);
tempPrintContainer.style.cssText = 'position: absolute; left: -9999px; top: -9999px;';
// 将Canvas插入临时容器
finalCanvas.style.cssText = `width: ${paperWidthMm}mm; height: ${paperHeightMm}mm; max-width: 100%; max-height: 100%; object-fit: contain;`;
tempPrintContainer.appendChild(finalCanvas);
document.body.appendChild(tempPrintContainer);
// 5. 调用printJS打印高清Canvas（而非原HTML）
// 7. 调用printJS打印高清Canvas（而非原HTML）
printJS({
printable: tempPrintContainer, // 打印临时容器
type: 'html',
header: null,
footer: null,
scanStyles: false, // 禁用自动扫描样式，手动控制
// 自定义打印样式：确保Canvas适配纸张、无多余边距
// 自定义打印样式：确保Canvas适配纸张、无多余边距、强制单页
style: `
@page {
size: ${paperWidthMm}mm ${paperHeightMm}mm;
margin: 0 !important;
padding: 0 !important;
}
* {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
html, body {
margin: 0 !important;
padding: 0 !important;
width: ${paperWidthMm}mm !important;
height: ${paperHeightMm}mm !important;
overflow: hidden !important;
}
#${printContainerId} {
width: 100%;
height: auto;
margin: 0;
padding: 0;
width: ${paperWidthMm}mm !important;
height: ${paperHeightMm}mm !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
#${printContainerId} canvas {
max-width: 100%;
height: auto;
border: none;
width: ${paperWidthMm}mm !important;
height: ${paperHeightMm}mm !important;
max-width: ${paperWidthMm}mm !important;
max-height: ${paperHeightMm}mm !important;
object-fit: contain !important;
border: none !important;
}
@media print {
body * { visibility: hidden; }
#${printContainerId}, #${printContainerId} * { visibility: visible; }
#${printContainerId} { position: absolute; top: 0; left: 0; }
body * { visibility: hidden !important; }
#${printContainerId}, #${printContainerId} * { visibility: visible !important; }
#${printContainerId} {
position: absolute !important;
top: 0 !important;
left: 0 !important;
page-break-inside: avoid !important;
break-inside: avoid !important;
page-break-after: avoid !important;
break-after: avoid !important;
page-break-before: avoid !important;
break-before: avoid !important;
orphans: 999 !important;
widows: 999 !important;
}
}
`,
printContainer: true,
onAfterPrint: () => {
// 6. 打印完成后清理临时容器
document.body.removeChild(tempPrintContainer);
Message.success('打印准备完成，请在打印预览中确认打印');
// 8. 打印完成后清理临时容器
if (document.body.contains(tempPrintContainer)) {
document.body.removeChild(tempPrintContainer);
}
Message.success('打印完成');
},
onError: (error) => {
// 异常时也清理临时容器
document.body.removeChild(tempPrintContainer);
if (document.body.contains(tempPrintContainer)) {
document.body.removeChild(tempPrintContainer);
}
console.error('打印失败:', error);
Message.error('打印失败，请重试');
}
});
// document.removeChild(tempPrintContainer);
} catch (error) {
console.error('打印准备失败:', error);
Message.error('打印内容准备失败，请重试');