Witinweb
Published in

Witinweb

[Vue.js] 화면의 특정영역을 PDF 로 다운로드하는 기능 만들기

jsPDF를 활용하여 원하는 DOM 영역을 PDF 로 다운받을 수 있다. 해당 라이브러리를 살펴보면 image to pdf, html to pdf, svg to pdf text to pdf 등 여러 방법들을 소개하고 있지만, 텍스트 기반의 pdf 를 생성하고자 하는게 아니라면 DOM to JPG to PDF 방식이 속편하다.

아래 소스코드는 DOM의 특정 영역을 셀렉트하여 html2canvas 를 통해 이미지로 렌더링하고, 해당 이미지를 jsPDF를 통해 pdf로 변환하는 작업이다. window.html2canvas = heml2canvas 를 제외하고는 makePDF 함수는 일반 자바스크립트 환경에서도 충분히 사용할 수 있을것이다.

설정한 canvas 높이를 넘어서면 자동으로 페이징을 처리해주도록 했다. 그리고 당연하게도 html2canvas, jspdf 패키지는 별도로 설치해주어야 한다. 아래 소스는 html2canvas: 1.5.0-beta4, v1.0.1, jspdf: 1.3.5를 기준으로 테스트되었다.

더 구체적인 설명은 코드로 대체한다. 도움이 되었다면 💛 🙏

  • html2canvas 가 1.0으로 버전업되면서 이미지의 화질이 대폭 개선되었다. 아직 알파단계이긴하나 많이 안정화되었다. 위 코드는 정상적으로 작동하는것을 확인했다. scale옵션을 통해 스케일을 원하는대로 크게 확대할 수 있다.
  • 대신 용량이 커질 수 있다. 특히 pdf로 다운받으면 더욱 심해지는데, png나 jpg를 사용하지 말고 jpeg를 사용하면 많이 줄일 수 있다.

이 글이 마음에 드셨다면 👏🏽👏🏽, 커피한잔 후원하기 (카카오페이), 이메일 구독

--

--

웹을 이해하고 웹에 wit를 불어넣는 놀이터

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store