본문 바로가기

PDF

(2)
[JavaScript] PDF다운로드 기능 구현하기 (html2pdf) 오류 해결! 지난번 html2pdf를 사용하여 PDF다운로드 기능을 만들어봤다. 그런데 파일명이 변경되지 않는 오류가 생겼는데 이유를 알게 되어 기록하기로 한다! 다양한 예제들을 찾아보니 출력할 엘리먼트를 하나의 html에 담아 해당 요소를 가져오는 방식을 사용한다는 걸 알게 되었다. `[document.querySelectorAll()]` 을 사용하면 요소들이 배열에 담겨 출력되어서 생긴 문제였다…! 오류 수정과 함께 로딩이미지 삽입과 페이지 나누기도 추가해 보았다. 📢 수정 및 추가 내용 오류 수정 다운로드 진행 중일 때 로딩이미지 삽입 페이지 나누기 👉 css page-break 보러 가기 html, css pdf 다운로드 What is Lorem Ipsum? Lorem Ipsum is simply dummy ..
[JavaScript] PDF다운로드 기능 구현하기 ( html2pdf ) html2pdf는 html2canvas 와 jsPDF를 사용하여 웹페이지나 요소를 PDF로 변환할 수 있다. html2Pdf를 활용하여 PDF 다운로드 기능을 구현해 보자! 1. 필요한 스크립트 //기본세팅 2. html과 css .page 엘리먼트를 a4용지 크기로 설정해서 총 4장의 pdf가 출력되면 된다! pdf 다운로드 1 2 3 4 3. PDF 다운로드 스크립트 function FnPDF() { const pages = document.querySelectorAll('.page'); //.page 전부 찾기 html2PDF(pages, { jsPDF: { format: 'a4',//pdf사이즈 }, html2canvas: { scrollX: 0, scrollY: -window.scrollY, /..