지난번 html2pdf를 사용하여 PDF다운로드 기능을 만들어봤다.
그런데 파일명이 변경되지 않는 오류가 생겼는데 이유를 알게 되어 기록하기로 한다!
다양한 예제들을 찾아보니 출력할 엘리먼트를 하나의 html에 담아 해당 요소를 가져오는 방식을 사용한다는 걸 알게 되었다.
`[document.querySelectorAll()]` 을 사용하면 요소들이 배열에 담겨 출력되어서 생긴 문제였다…!
오류 수정과 함께 로딩이미지 삽입과 페이지 나누기도 추가해 보았다.
📢 수정 및 추가 내용
- 오류 수정
- 다운로드 진행 중일 때 로딩이미지 삽입
- 페이지 나누기 👉
css page-break 보러 가기
html, css
<head>
<style>
.page {
width: 210mm;
background: salmon;
margin-bottom: 10px;
box-sizing: border-box;
}
.page-break-before {
/*해당 요소의 이후에 요소가 있다면 항상 다음페이지로 넘김.*/
page-break-before: always;
}
</style>
</head>
<body>
<button onclick="FnPDF()">pdf 다운로드</button>
<div id="PrintWrap" class="page">
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book.
<div class="page-break-before"></div>
Where does it come from?
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin
literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and
going through the cites of the word in classical literature, discovered the undoubtable source.
</div>
</body>script
//로딩이미지
function FnLoading(isShow) {
var loading = document.getElementById('Loading');
isShow ? loading.style.display = "block" : loading.style.display = "none";
}
//PDF출력
function FnPDF() {
FnLoading(true);//함수 실행 시 로딩이미지 보이도록
var element = document.getElementById('PrintWrap');
var opt = {
margin: 10,
filename: 'my_file.pdf',
image: { tyep: 'jpeg', quality: 1 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'mm', format: 'a4', }
}
//.then( 출력성공시 실행될 함수 , 출력실패시 실행될 함수 )
html2pdf().from(element).set(opt).save().then(
function () { FnLoading(false) },
function () { FnLoading(false); alert("PDF 출력에 실패했습니다."); }
);
}결과
See the Pen Untitled by yelim (@yelm) on CodePen.
html2canvas + jsPDF 를 사용하는 것보다 훨씬 간편하게 구현 가능하다!
참고
https://github.com/eKoopmans/html2pdf.js
GitHub - eKoopmans/html2pdf.js: Client-side HTML-to-PDF rendering using pure JS.
Client-side HTML-to-PDF rendering using pure JS. Contribute to eKoopmans/html2pdf.js development by creating an account on GitHub.
github.com
PDF 다운로드- html2pdf.js 이용
PDF 다운로드- html2pdf.js 이용 샘플 구현 샘플페이지 html2pdf.bundle.js 파일 PDF 다운로드 비밀번호 재설정에 대한 이메일 회신입니다. 회원님의 플레이더세이프티 비밀번호 재설정 요청을 받았습니다
mtoo.tistory.com
로딩이미지 css
CSS loaders and Spinners
cssloaders.github.io
공부내용을 기록하는 블로그입니다.
피드백은 언제든지 환영합니다😊
'Cod-ing > JavaScript' 카테고리의 다른 글
| [JavaScript] 10분마다 실행되는 함수 (0) | 2023.10.18 |
|---|---|
| [JavaScript] PDF다운로드 기능 구현하기 ( html2pdf ) (0) | 2023.09.18 |
| [JavaScript] 전개구문(Spread syntax)이란? (0) | 2023.09.17 |
| [JavaScript] 구조분해할당이란? (0) | 2023.08.27 |
| [JavaScript] data- 속성을 이용한 그래프 바 만들기 (0) | 2022.04.20 |
