pdf 생성 기능 구현 시 페이지 넘어갈 때 텍스트 잘리는 현상

Question

안녕하세요,현재 react-pdf 전용 컴포넌트로 다시 퍼블리싱하고 구현하기에는 어려운 상황이라 방법을 찾다가html2canvas로 html 을 이미지 변환한 뒤 다시 jspdf로 pdf 변환하여 다운받도록 하는 기능을 구현하고 있는데요,문제는 카드 컴포넌트 길이가 일정하지 않아 다음 페이지로 넘어가는 경우가 많고 이 부분은 바꿀 수 없습니다.따라서 한 카드가 페이지 넘어갈 때 잘리는 경우가 많은데, 이 경우 카드 내 텍스트가 페이지 바뀌는 부분에 걸쳐서 텍스트가 잘리는 경우가 있습니다. 페이지 바뀔 때 텍스트 잘림을 해결할 수 있는 방법을 찾아보면서 고민하고 있는데 각 카드 컴포넌트의 텍스트마다 ref로 위치값을 얻어서 페이지 나뉘는 ref 지점에 걸리면 padding값을 주어 해결하는 방법이 떠오르긴 하는데 주어진 시간에 비해 너무 많은 공수가 들어가 불가능할 것 같습니다. overflow-wrap: break-word나 break-inside 같은 css 속성도 관련된 것 같아서 적용해봤는데 효과가 없었습니다. 혹시 좋은 해결방법이 있다면 조언 주시면 감사하겠습니다.

S_J · Answer

카드에 아래 속성을 적용 후 확인 해 보세요.아래 속성이 적용 된 영역은 잘리지 않고 pdf에 출력됩니다.page-break-inside: avoid;

pdf 생성 기능 구현 시 페이지 넘어갈 때 텍스트 잘리는 현상

1개의 답변

Q&A 목록