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