반응형
목차
javascript/jQuery 기반
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>htmlToPdf_ex1</title>
</head>
<body>
<!-- pdf로 변환할 element id 설정 -->
<div id="pdf-content">
<h1>Hello, PDF!</h1>
<p>This is an example of converting HTML to PDF using html2pdf.js</p>
</div>
<!-- jQuery cdn -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- html2pdf cdn -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
$(function() {
const element = document.getElementById('pdf-content');
html2pdf(element);
});
</script>
</body>
</html>javascript/Vue.js 기반
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>htmlToPdf_ex1</title>
</head>
<body>
<!-- pdf로 변환할 element id 설정 -->
<div id="pdf-content">
<h1>Hello, PDF!</h1>
<p>This is an example of converting HTML to PDF using html2pdf.js</p>
<!-- 버튼 클릭 시 pdfConvert()에서 pdf 변환 처리 -->
<button type="button" @click.prevent="pdfConvert">convert</button>
</div>
<!--vue.js 추가-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<!-- html2pdf 추가 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
new Vue({
el: '#pdf-content',
data: {},
methods: {
pdfConvert() {
const pdfContent = document.getElementById('pdf-content');
html2pdf(pdfContent);
},
},
});
</script>
</body>
</html>숨김 항목 PDF 변환 예시
숨김 항목을 버튼 클릭 시 잠시 보이게 해서 PDF 변환 후 다운로드 후 다시 숨김처리 하는 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>htmlToPdf_ex1</title>
<style type="text/css">
.hidden {
display: none;
}
</style>
</head>
<body>
<div id="app">
<div id="pdf-content" class="hidden">
<h1>Hello, PDF!</h1>
<p>This is an example of converting HTML to PDF using html2pdf.js</p>
</div>
<button type="button" @click.prevent="pdfConvert">convert</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
new Vue({
el: '#app',
data: {},
methods: {
// async을 붙여서 promise를 반환하게 하고
async pdfConvert() {
const pdfContent = document.getElementById('pdf-content');
pdfContent.style.display = 'block';
const options = {
margin: 10,
filename: 'example.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
};
//html2pdf() 작업이 끝날 때까지 다음 코드 실행 잠시 멈춤(pdf 변환 이루어진 다음에 다음코드 실행)
await html2pdf().from(pdfContent).set(options).save();
pdfContent.style.display = 'none';
},
},
});
</script>
</body>
</html>결과
위코드 에디터에 붙여 넣고 실행하면 pdf 다운로드 창 표시됨
reference: 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를 만드는 걸 권장함
아래 링크의 의존성(gradle), serviceImpl 부분의 convertHtmlToPdf() 부분 참조
[springBoot] 급여명세서 메일발송 기능 개발 2.(feat. back-end)
목차 급여명세서 메일발송 기능 프론트단 [Vue.js] 급여명세서 메일발송 기능 개발 1.(feat. frontend) 목차 급여명세서 발송 화면(html) 프로젝트 소스에서 편집해서 가져온 것이므로 class, 디자인 등은
yaga.tistory.com
개인 스터디 기록을 메모하는 공간이라 틀린점이 있을 수 있습니다.
틀린 점 있을 경우 댓글 부탁드립니다.
반응형
'IT > development' 카테고리의 다른 글
| [development] 티스토리 일괄 댓글 작성 개발(feat. open API) (50) | 2023.09.13 |
|---|---|
| [base64] 이미지를 base64로 인코딩 (64) | 2023.09.09 |
| [Git] Git Branching Strategy(feat. 브랜치 전략) (66) | 2023.08.24 |
| [springBoot] 엑셀파일 읽기(feat. ajax) (62) | 2023.08.23 |
| [Java] 가변인자 사용(feat. String ... str) (37) | 2023.08.22 |