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 14:45:22 +08:00
parent 04b46d8fee
commit 732646096f
1 changed files with 68 additions and 87 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

@@ -27,7 +27,7 @@
<script> <script>
import domToImage from 'dom-to-image'; import domToImage from 'dom-to-image';
import printJS from 'print-js'; // import printJS from 'print-js'; // 改为自建 iframe 打印，避免多余空白页
import html2canvas from 'html2canvas'; // 新增：引入高清渲染库 import html2canvas from 'html2canvas'; // 新增：引入高清渲染库
import { Message } from 'element-ui'; import { Message } from 'element-ui';
@@ -157,93 +157,74 @@ export default {
finalCanvas = scaledCanvas; finalCanvas = scaledCanvas;
} }
// 6. 创建临时打印容器（避免影响原DOM） // 6. 生成 DataURL，使用 printJS 的 image 模式（单图），并减少额外样式以避免隐藏内容
const printContainerId = 'temp-print-container-' + new Date().getTime(); const dataUrl = finalCanvas.toDataURL('image/png');
const tempPrintContainer = document.createElement('div');
tempPrintContainer.id = printContainerId;
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);
// 7. 调用printJS打印高清Canvas（而非原HTML） // 6. 创建隐藏 iframe 进行打印，避免 printJS 的分页行为
printJS({ const iframe = document.createElement('iframe');
printable: tempPrintContainer, // 打印临时容器 iframe.style.position = 'fixed';
type: 'html', iframe.style.right = '0';
header: null, iframe.style.bottom = '0';
footer: null, iframe.style.width = '0';
scanStyles: false, // 禁用自动扫描样式，手动控制 iframe.style.height = '0';
// 自定义打印样式：确保Canvas适配纸张、无多余边距、强制单页 iframe.style.border = '0';
style: ` document.body.appendChild(iframe);
const doc = iframe.contentWindow.document;
doc.open();
doc.write(`
<!doctype html>
<html>
<head>
<style>
@page { @page {
size: ${paperWidthMm}mm ${paperHeightMm}mm; size: ${paperWidthMm}mm ${paperHeightMm}mm;
margin: 2mm !important; /* 留出页边距，避免紧贴边框 */ margin: 2mm;
padding: 0 !important;
} }
* { * {
-webkit-print-color-adjust: exact !important; -webkit-print-color-adjust: exact;
print-color-adjust: exact !important; print-color-adjust: exact;
box-sizing: border-box;
} }
html, body { html, body {
margin: 0 !important; margin: 0;
padding: 0 !important; padding: 0;
width: ${paperWidthMm}mm !important; width: 100%;
height: ${paperHeightMm}mm !important; height: 100%;
overflow: hidden !important; overflow: hidden;
} }
#${printContainerId} { body {
width: calc(${paperWidthMm}mm - 4mm) !important; /* 两侧各2mm的页边距后可用宽度 */ display: flex;
height: calc(${paperHeightMm}mm - 4mm) !important; /* 上下各2mm的页边距后可用高度 */ align-items: center;
margin: 0 !important; justify-content: center;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
} }
#${printContainerId} canvas { img {
width: 100% !important; width: calc(100% - 4mm);
height: 100% !important; height: calc(100% - 4mm);
max-width: calc(${paperWidthMm}mm - 4mm) !important; object-fit: contain;
max-height: calc(${paperHeightMm}mm - 4mm) !important; display: block;
object-fit: contain !important; page-break-after: avoid;
border: none !important; page-break-before: avoid;
page-break-inside: avoid;
} }
@media print { </style>
body * { visibility: hidden !important; } </head>
#${printContainerId}, #${printContainerId} * { visibility: visible !important; } <body>
#${printContainerId} { <img src="${dataUrl}" />
position: absolute !important; </body>
top: 0 !important; </html>
left: 0 !important; `);
page-break-inside: avoid !important; doc.close();
break-inside: avoid !important;
page-break-after: avoid !important; iframe.onload = () => {
break-after: avoid !important; setTimeout(() => {
page-break-before: avoid !important; iframe.contentWindow.focus();
break-before: avoid !important; iframe.contentWindow.print();
orphans: 999 !important; setTimeout(() => {
widows: 999 !important; document.body.removeChild(iframe);
} }, 1000);
} }, 300);
`, };
printContainer: true,
onAfterPrint: () => {
// 8. 打印完成后清理临时容器
if (document.body.contains(tempPrintContainer)) {
document.body.removeChild(tempPrintContainer);
}
Message.success('打印完成');
},
onError: (error) => {
// 异常时也清理临时容器
if (document.body.contains(tempPrintContainer)) {
document.body.removeChild(tempPrintContainer);
}
console.error('打印失败:', error);
Message.error('打印失败，请重试');
}
});
} catch (error) { } catch (error) {
console.error('打印准备失败:', error); console.error('打印准备失败:', error);
Message.error('打印内容准备失败，请重试'); Message.error('打印内容准备失败，请重试');