diff --git a/klp-ui/src/views/wms/coil/panels/LabelRender/index.vue b/klp-ui/src/views/wms/coil/panels/LabelRender/index.vue index c13e0763..7777da2d 100644 --- a/klp-ui/src/views/wms/coil/panels/LabelRender/index.vue +++ b/klp-ui/src/views/wms/coil/panels/LabelRender/index.vue @@ -150,17 +150,21 @@ export default { // 5. 用html2canvas生成高清Canvas(与批量导出完全一致) // 关键:直接截图 labelContainer,与批量打印完全一致 + // 确保canvas的宽高与labelContainer的实际尺寸一致 + const containerWidth = labelContainer.offsetWidth || labelContainer.scrollWidth; + const containerHeight = labelContainer.offsetHeight || labelContainer.scrollHeight; + const canvas = await html2canvas(labelContainer, { backgroundColor: '#ffffff', scale: 3, useCORS: true, // 让 html2canvas 为频繁读回优化 Canvas(与批量导出一致) willReadFrequently: true, - // 确保按元素尺寸截图(与批量导出完全一致) - width: labelContainer.offsetWidth, - height: labelContainer.offsetHeight, - windowWidth: labelContainer.scrollWidth, - windowHeight: labelContainer.scrollHeight, + // 确保按元素尺寸截图,明确指定宽高 + width: containerWidth, + height: containerHeight, + windowWidth: containerWidth, + windowHeight: containerHeight, }); // 5. 使用 pdf-lib 生成单页 PDF(占满整张纸,无边距) @@ -170,21 +174,17 @@ export default { const pdfDoc = await PDFDocument.create(); const imgPng = await pdfDoc.embedPng(canvas.toDataURL('image/png')); + // 确保页面尺寸正确:宽100mm,高80mm(横向) const page = pdfDoc.addPage([pageWidthPt, pageHeightPt]); - const imgW = imgPng.width; - const imgH = imgPng.height; - // 直接占满整个PDF页面,不留边距 - // 确保图片按页面尺寸等比缩放,占满整张纸 - const scale = Math.min(pageWidthPt / imgW, pageHeightPt / imgH); - const drawW = imgW * scale; - const drawH = imgH * scale; - - // 居中放置(如果图片比例与页面不完全一致) - const x = (pageWidthPt - drawW) / 2; - const y = (pageHeightPt - drawH) / 2; - - page.drawImage(imgPng, { x, y, width: drawW, height: drawH }); + // 直接拉伸填充整个PDF页面,不留边距,确保占满整张纸 + // 从(0,0)开始,直接填充整个页面尺寸 + page.drawImage(imgPng, { + x: 0, + y: 0, + width: pageWidthPt, + height: pageHeightPt + }); const pdfBytes = await pdfDoc.save(); const blob = new Blob([pdfBytes], { type: 'application/pdf' });