728x90
반응형
- [ 언어·프레임워크/React.js ][React.js] jsPDF를 이용한 웹 화면 PDF 내보내기 중 이슈: 페이지 오버플로우 이미지 잘림 문제2024-07-24 11:06:311. 화면에 렌더링 된 테이블 페이지 오버플로우 문제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..
- [ 언어·프레임워크/React.js ][React.js] 네이버 지도 API, 지도 화면 PDF로 변환! 지도는 없고 빈 화면만 ㅠㅠ2023-06-06 14:26:061. 네이버 지도 API, 지도 화면 PDF로 변환했는데 빈 화면만?! 네이버 지도 API로 렌더링 된 지도가 포함된 페이지를 PDF 파일로 저장하는 기능을 적용했다. 사용한 모듈은 html2pdf와 html2canvas이다. 에러 없이 잘 저장되었으나 생성된 PDF 파일을 열었더니 [그림 1]과 같이 지도 영역에는 빈 화면만 있었다. ㅠㅠ 2. html을 이미지로 변환, 이미지를 PDF로 변환! html을 이미지로 만들고 그 이미지를 PDF로 만들면 되지 않을까하는 생각이 들었다. 그래서 npm에서 html-to-image와 jspdf를 찾아 설치하여 테스트를 진행했다. 설치한 라이브러리 리스트는 다음과 같다. "html-to-image": "^1.11.11", "jspdf": "^2.5.1", htm..
728x90
반응형