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

Jeong Woo Ahn
Dec 13, 2017 · 2 min read

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를 기준으로 테스트되었다.

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

2018년 9월 업데이트

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

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

Witinweb

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

Jeong Woo Ahn

Written by

Vue.js 관련 이야기들 | 그림그리는 프로그래머 | working at habitfactory.co | 커피한잔 후원하기 https://bit.ly/355PDlu | 이메일 구독하기 http://bit.ly/3ax32Fn

Witinweb

Witinweb

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

Jeong Woo Ahn

Written by

Vue.js 관련 이야기들 | 그림그리는 프로그래머 | working at habitfactory.co | 커피한잔 후원하기 https://bit.ly/355PDlu | 이메일 구독하기 http://bit.ly/3ax32Fn

Witinweb

Witinweb

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

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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