IT/development

[JavaScript] htmlToPdf convert(feat. html2pdf)

알 수 없는 사용자 2023. 8. 26.

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