1. 문제점

window.print()를 사용하여 이력서 pdf를 저장하기로 확정이 났는데, 이력서 전체가 pdf로 저장되지 않고 현재 보여지고 있는 뷰포트에서의 화면이 저장 되는 현상이 발생하였다..

1. 내용이 길어지면 pdf가 잘리는 현상

이런식으로 짤려지는 현상이 발생하여서 다른 곳에서 확인해보니 내용이 길어져도 정상적으로 페이지가 나뉘어서 저장되는 것을 확인하였다.

2. 해결방법

1. global.css

처음에는 next.js에서 발생한 문제점이라고 생각하고 리서치를 하고 있다가
문득 global.css에서 전역 적용한 css가 문제가 있을까 하고 찾아보니..

html,
body,
#__next {
  max-width: 100vw;
  height: 100vh;
  overflow-x: hidden;
}

이 height: 100vh가 문제였다. 100vh로 전역 지정을 해놨었기 때문에 내가 지금 보고 잇는 화면이 출력이 되었던 것이었다. 이 코드를 삭제하고 다시 저장을 한 결과

정상적으로 출력이 되는 것을 확인 할 수 있었다.