html-to-image 가 높이를 약간 짧게 잡아 발주서 하단 날짜 줄이 잘리던 문제. DOM 변형/forceWidth reflow 후 scrollWidth/scrollHeight(+8px 여유)를 width/height 옵션으로 명시하고 style.overflow=visible 로 클립 방지.
This commit is contained in:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user