[프로젝트] vue3-html2pdf 적용시 잘림현상 해결하기

ljk4268·2024년 1월 6일

TROUBLESHOOTING vue3 vue3-html2pdf 문제해결 부동산자산관리시스템

🖥 [프로젝트] 부동산_자산관리_시스템(기능개선 + 고도화) 진행중

목록 보기

9/9

진행 중인 프로젝트에 청구서 페이지가 있습니다.
해당 청구서 페이지는 'vue3-html2pdf' 라이브러리를 사용해서 PDF로 저장할 수 있는 기능이 있습니다 :)

청구하는 항목은 테이블에 보이도록 되어있는데요!
청구하는 항목이 많아져 테이블이 길어지면 'vue3-html2pdf' 라이브러리가 자동으로 2페이지를 생성하면서 여러 잘림현상들의 문제를 겪게 되었습니다.

제가 겪은 잘림현상은 아래와 같습니다!

1. 청구서 항목이 많아지는 경우 항목이 적힌 테이블이 길어지면서 2페이지로 넘어가는데, 행(row)이 잘리면서 항목 텍스트가 잘리는 현상.
2. 청구서 항목 테이블 아래 텍스트가 잘리는 현상

이 문제를 어떻게 해결해야 할 지 막막했는데, 여러시도 끝에 나름의 방법을 찾아내 해결했습니다.

vue3-html2pdf 사용한 대략적인 코드를 먼저 공유 할게요!

<vue3-html2pdf
  :show-layout="true"
  :float-layout="false"
// 위 옵션들과 함께 vue3-html2pdf에서 제공하는 여러 옵션들이 적혀있습니다. 
 >
    <template v-slot:pdf-content>
    	<div class="pdf-contents">
        	<div class="first-block">
              // 청구서 항목이 적힌 테이블까지의 부분
            <div>
            <div class="empty-block">
             // 테이블 바로 아래 빈 영역
            </div>
			<div>
             // 납부기한, 납부계좌, 직인 등 텍스트 영역
            </div>
        </div>
    </template>
</vue3-html2pdf>

위 코드를 이미지로 설명하자면!

주황색부분: classname="pdf-content"에 해당되는 부분으로 청구페이지 전체
분홍색부분: classname="first-block"에 해당되는 부분으로 테이블까지의 부분
파랑색부분: classname="empty-block"에 해당되는 부분으로 그냥 빈 영역
초록색부분: 납부기한, 납부계좌, 직인 등 텍스트 영역

이렇게 입니다.

vue3-html2pdf에서 제공하는 옵션들로 해결해볼까!

처음에는 vue3-html2pdf에서 제공하는 옵션으로 해결해보려고 했습니다.
제공하는 옵션 중에 'manual-pagination'라는 옵션이 있습니다.

<vue3-html2pdf
 **:manual-pagination="true"**
>
   <div class="html2pdf__page-break"></div>
  </vue3-html2pdf>

manual-pagination옵션을 true로 설정해두고,
2페이지로 넘어가기를 원하는 요소에 "html2pdf__page-break"라는 클래스를 넣어주면
해당 요소를 2페이지로 넘겨줍니다.

저는 위 이미지 초록색부분(= 납부기한, 납부계좌 등 텍스트영역)에 "html2pdf__page-break"클래스를 넣고 테스트를 해봤었는데요,

제가 원하는대로 해주지 않더라구요 🥲
아래 이미지처럼 제가 원하는 영역을 2페이지로 넘겨주긴하는데 쩌어어어쪽 아래에 텍스트를 보여줍니다 🥲🥲🥲

이건 아니야... 😥

html페이지가 2페이지로 넘어가는 요소 높이를 활용해볼까?

vue3-html2pdf에서 제공하는 옵션으로 제가 원하는대로 해결할 수 없어 고민고민하다가 생각해낸 방법입니다.

html페이지가 2페이지로 넘어가는 요소 높이를 활용하는 방법입니다.

저는 3가지의 높이를 이용했습니다.
1. 주황색부분: 주황색부분: classname="pdf-content"에 해당되는 부분으로 청구페이지 전체의 높이
2. 분홍색부분: classname="first-block"에 해당되는 부분으로 테이블까지의 높이
3. 파랑색부분: classname="empty-block"에 해당되는 부분으로 그냥 빈 영역의 높이

const pdfDownload = () => {
	const pdfFullHeight =
      document.getElementsByClassName('pdf-content')[0].offsetHeight;
	const firstContentsHeight =
      document.getElementsByClassName('first-block')[0].offsetHeight;
	if (pdfFullHeight > 1078) {
  	document.getElementsByClassName('empty-block')[0].style.height = 
      `${1128 - firstContentsHeight}px`;
	}
}

어떻게 이용했냐면,
먼저, 청구서페이지 전체 높이를 구했습니다.
청구서페이지가 2페이지로 되는 순간의 전체 높이를 먼저 구했는데, 그 값이 1078이였어요!

그리고 분홍색부분, 테이블까지의 높이도 구했는데요
테이블까지의 부분이 pdf 변환시 1페이지에 꽉 차는 순간의 높이를 구했습니다.
청구서항목이 적힌 테이블이 2페이지로 넘어가기 직전까지의 높이지요! 그 값은 1128이였어요!

이 값들을 활용해서 아래의 코드를 실행하면 되는데요,

if (pdfFullHeight > 1078) {
document.getElementsByClassName('empty-block')[0].style.height =
${1128 - firstContentsHeight}px;
}

청구서 전체 페이지의 높이가 1078을 넘기는 경우
파란색 부분: classname="empty-block"에 해당되는 부분으로 그냥 빈 영역의 높이 << 이 부분의 높이를
1128-firstContentsHeight로 설정해줍니다. ( 빈 영역을 따로 설정해둔 이유가 있었숩니다 😅😅 )

이렇게 하면 분홍색부분+파란색부분의 높이가 1128이 되면서 아래 텍스트영역은 자동으로 2페이지로 넘어가게 됩니다.

그림으로 설명하자면 아래와 같습니다.