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-10 11:47:47 +08:00
parent 3096415ecb
commit 407d4e0955
2 changed files with 16 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
klp-ui/src/views/wms/coil/panels/LabelRender/ProductionTagPreview.vue
View File

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

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

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