原料码放大

This commit is contained in:
2026-01-10 11:47:47 +08:00
parent 3096415ecb
commit 407d4e0955
2 changed files with 16 additions and 24 deletions

View File

@@ -121,7 +121,7 @@ export default {
}, },
paperWidthMm: { paperWidthMm: {
type: Number, type: Number,
default: 100 // 原料码100mm x 80mm default: 100 // 原料码100mm x 80mm宽100高80
}, },
paperHeightMm: { paperHeightMm: {
type: Number, type: Number,
@@ -233,7 +233,7 @@ export default {
<style scoped> <style scoped>
.label-container { .label-container {
width: 25em; width: 25em;
height: 15em; height: 20em;
padding: 0px; padding: 0px;
display: flex; /* 启用Flex布局 */ display: flex; /* 启用Flex布局 */
flex-direction: column; /* 子元素垂直排列 */ flex-direction: column; /* 子元素垂直排列 */
@@ -286,10 +286,10 @@ export default {
white-space: normal; white-space: normal;
} }
/* 打印样式 - 强制单页适配180mm x 100mm纸张保持原有样式不变 */ /* 打印样式 - 强制单页适配100mm x 80mm纸张保持原有样式不变 */
@media print { @media print {
@page { @page {
size: 180mm 100mm; size: 100mm 80mm;
margin: 0 !important; margin: 0 !important;
padding: 0 !important; padding: 0 !important;
} }

View File

@@ -102,7 +102,7 @@ export default {
Message.info('正在准备打印内容,请稍等...'); Message.info('正在准备打印内容,请稍等...');
// 2. 计算纸张尺寸(与批量导出保持一致) // 2. 计算纸张尺寸(与批量导出保持一致)
// 根据 labelType 判断:'2' 是材料标签100x80'3' 是外标180x100 // 根据 labelType 判断:'2' 是材料标签100x80宽100高80'3' 是外标180x100
const isMaterial = this.labelType === '2'; const isMaterial = this.labelType === '2';
const paperWidthMm = isMaterial ? 100 : 180; const paperWidthMm = isMaterial ? 100 : 180;
const paperHeightMm = isMaterial ? 80 : 100; const paperHeightMm = isMaterial ? 80 : 100;
@@ -126,12 +126,13 @@ export default {
// 根据标签类型设置不同的布局方式 // 根据标签类型设置不同的布局方式
if (isMaterial) { if (isMaterial) {
// 材料标签:填充 wrapper // 材料标签:设置固定尺寸确保100mm x 80mm的比例
wrapper.style.display = 'flex'; wrapper.style.display = 'flex';
wrapper.style.alignItems = 'center'; wrapper.style.alignItems = 'center';
wrapper.style.justifyContent = 'center'; wrapper.style.justifyContent = 'center';
labelContainer.style.width = '100%'; // 直接设置labelContainer的尺寸为mm单位确保正确的物理尺寸比例
labelContainer.style.height = '100%'; labelContainer.style.width = `${paperWidthMm}mm`;
labelContainer.style.height = `${paperHeightMm}mm`;
} else { } else {
// 成品标签:直接放在 wrapper 中,保持原始布局(与批量打印一致) // 成品标签:直接放在 wrapper 中,保持原始布局(与批量打印一致)
wrapper.style.display = 'block'; wrapper.style.display = 'block';
@@ -162,35 +163,26 @@ export default {
windowHeight: labelContainer.scrollHeight, windowHeight: labelContainer.scrollHeight,
}); });
// 5. 使用 pdf-lib 生成单页 PDF与批量导出完全一致 // 5. 使用 pdf-lib 生成单页 PDF占满整张纸,无边距
const mmToPt = 72 / 25.4; const mmToPt = 72 / 25.4;
const pageWidthPt = paperWidthMm * mmToPt; const pageWidthPt = paperWidthMm * mmToPt;
const pageHeightPt = paperHeightMm * mmToPt; const pageHeightPt = paperHeightMm * mmToPt;
// 边距:与批量导出保持一致
// 材料标签100x80左右2mm上下0.5mm
// 成品标签180x100左右4mm上下0.5mm
const marginXmm = isMaterial ? 2 : 4;
const marginYmm = 0.5; // 上下对称边距(不裁切前提下尽量贴边)
const marginXPt = marginXmm * mmToPt;
const marginYPt = marginYmm * mmToPt;
const contentWidthPt = pageWidthPt - marginXPt * 2;
const contentHeightPt = pageHeightPt - marginYPt * 2;
const pdfDoc = await PDFDocument.create(); const pdfDoc = await PDFDocument.create();
const imgPng = await pdfDoc.embedPng(canvas.toDataURL('image/png')); const imgPng = await pdfDoc.embedPng(canvas.toDataURL('image/png'));
const page = pdfDoc.addPage([pageWidthPt, pageHeightPt]); const page = pdfDoc.addPage([pageWidthPt, pageHeightPt]);
const imgW = imgPng.width; const imgW = imgPng.width;
const imgH = imgPng.height; const imgH = imgPng.height;
// 标准适配:确保完整显示且不变形(在内容区域内等比缩放,与批量导出完全一致) // 直接占满整个PDF页面不留边距
const scale = Math.min(contentWidthPt / imgW, contentHeightPt / imgH); // 确保图片按页面尺寸等比缩放,占满整张纸
const scale = Math.min(pageWidthPt / imgW, pageHeightPt / imgH);
const drawW = imgW * scale; const drawW = imgW * scale;
const drawH = imgH * scale; const drawH = imgH * scale;
// 内容区域内居中 + 外层边距(上下对称,与批量导出完全一致) // 居中放置(如果图片比例与页面不完全一致)
const x = marginXPt + (contentWidthPt - drawW) / 2; const x = (pageWidthPt - drawW) / 2;
const y = marginYPt + (contentHeightPt - drawH) / 2; const y = (pageHeightPt - drawH) / 2;
page.drawImage(imgPng, { x, y, width: drawW, height: drawH }); page.drawImage(imgPng, { x, y, width: drawW, height: drawH });