fix(capture): 발주서/거래명세표 이미지 하단 잘림 — 캡처 높이 명시
Deploy momo-erp / deploy (push) Successful in 2m2s

html-to-image 가 높이를 약간 짧게 잡아 발주서 하단 날짜 줄이 잘리던 문제.
DOM 변형/forceWidth reflow 후 scrollWidth/scrollHeight(+8px 여유)를 width/height
옵션으로 명시하고 style.overflow=visible 로 클립 방지.
This commit is contained in:
chpark
2026-05-27 10:58:46 +09:00
parent 86c65df97b
commit 3955638d9d
+9
View File
@@ -97,6 +97,12 @@ export async function captureAndShare({ node, filename, shareTitle, shareText, f
let dataUrl: string;
try {
const mod = await import("html-to-image");
// 모든 DOM 변형(필드 외형 제거 / date 프록시 / forceWidth reflow) 이 끝난 뒤의
// 실제 콘텐츠 크기로 캡처 영역을 고정한다. 안 하면 html-to-image 가 높이를
// 약간 짧게 잡아 발주서 하단(날짜 줄)이 잘리는 문제가 있음. (+8px 여유)
void node.offsetHeight; // reflow 강제
const captureWidth = Math.ceil(forceWidth ?? node.scrollWidth);
const captureHeight = Math.ceil(node.scrollHeight) + 8;
const baseOpts = {
backgroundColor: "#ffffff",
pixelRatio: 2,
@@ -104,6 +110,9 @@ export async function captureAndShare({ node, filename, shareTitle, shareText, f
// Windows Chrome 에서 외부 CDN 폰트(Pretendard) 임베드 단계가
// CORS/네트워크 문제로 실패하면 toPng 전체가 깨짐 → 폰트 임베드 스킵
skipFonts: true,
width: captureWidth,
height: captureHeight,
style: { overflow: "visible" } as Record<string, string>,
} as const;
try {