[ 언어·프레임워크/React.js ]
[React.js] jsPDF를 이용한 웹 화면 PDF 내보내기 중 이슈: 페이지 오버플로우 이미지 잘림 문제
2024-07-24 11:06:31
1. 화면에 렌더링 된 테이블 페이지 오버플로우 문제jsPDF를 이용해 웹 화면을 PDF로 내보내기 기능을 구현했다. 에러 없이 작동하였으나 [그림 1]과 같이 페이지 오버플로우로 그림이 잘린 경우 앞 페이지 하단, 뒷 페이지 상단 여백이 전혀 없는 pdf 파일이 생성되었다. 2. canvas 이용하여 해결페이지 오버플로우가 발생할 경우 이미지를 페이지 크기로 잘라 새로운 캔버스에 그리고 새로운 캔버스를 PDF에 추가하는 방식으로 해결하였다. [그림 2]는 최종 결과물이다. 작성한 전체 코드는 아래와 같다.import jsPDF from 'jspdf';import font from './font/NanumGothic-normal';import { format } from 'date-fns';const P..