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

Jeong Woo Ahn
Dec 13, 2017 · 2 min read

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

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

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

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

2018년 9월 업데이트

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

Witinweb

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

Jeong Woo Ahn

Written by

그림그리는 프로그래머 instagram@you_and_mydrawing | working at habitfactory.co

Witinweb

Witinweb

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