[JS] HTML 파일에서 손쉽게 PDF 파일 다운로드를 구현하는 방법

 

오늘의 ThreeDays 3일 프로젝트의 둘 째날이당

그래서 친구들과 카페옴 > 3 < 

 

구현할 기능

 

PDF 파일 다운로드 기능을 구현하고 싶었던 저는 처음 접해보는 것이라 오래 걸릴까 두려웠지만

이게 웬 걸! 금방 기능 구현을 끝낼 수 있었습니다!

 

Html2Canvas 덕분이죠 :)

 

pdf 출력을 원하는 부분에 "pdf-contents" 라는 id 를 설정해주고 

아래 옵션들 중 필요한 옵션들만 사용해줍니다!

 

소스 작성

<script>
		const  element = document.getElementById("pdf-contents")
		const options = {
			margin: [10, 10, 10, 10],                     
			filename: '코딩걸즈PDF',                     
			pagebreak: { mode: 'avoid-all' },    
			image: { type: 'jpeg', quality: 2 },    
			html2canvas: {
				useCORS: true,                           
				scrollY: 0,                                      
				scale: 1,                                         
				dpi: 300,
				letterRendering: false,
				allowTaint: false,                          
			},
				jsPDF: {
					orientation: 'landscape',                 
					unit: 'mm',
					format: 'a3'                                      
				},
			};

			/*pdfDownLoad*/
			const  pdfDownLoad = document.getElementById("pdfDownLoad")
			pdfDownLoad.onclick = () => {
				html2pdf(element, options);
			};
</script>

 

참고문서

더 자세한 옵션을 보실 수 있씁니다!

https://html2canvas.hertzen.com/configuration

 

문제발생

 

하지만 역시 문제는 개발의 꽃 ㅎㅎ ... 

어김없이 문제가 발생하였습니다. 

원하는 부분의 pdf 파일 출력은 잘 되지만 깨진 txt 파일도 같이 다운로드가 된다는 것입니다. 

 

문제 원인 분석 및 해결

 

Html2Canvas 옵션에 문제가 있는 줄 알아서 하나하나 뜯어보니까 전혀 문제가 없었다. 그렇다면 html 에 있지 않을까? 해서 봤는데 

<li><a href="파일 경로/파일이름.확장자" download="다운로드시 파일명" role="button"><input type="button" class="primary" value="PDF 다운로드" /></a></li>

 

이동할 경로도 필요없고 download 속성도 필요없었다. 

<li><input type="button" class="primary" value="PDF 다운로드" /></li>

 

지워주니 아주 잘 동작.... !!

 

 

글을 작성하는 사이에 코딩천재소녀가 네이버 이메일 전송 기능을 구현했다 :-) 굿!

이로써 두 개의 기능 완성!

 

https://github.com/Three-Dyas/ThreeDays

GitHub - Three-Dyas/ThreeDays: 3일만에 만드는 코딩걸즈의 프로젝트입니당