reveal.js로 만든 슬라이드를 pdf로 저장하는 방법을 reveal.js 제작자는 프린트 메뉴를 사용하라고 설명하고 있는데 이 방법을 쓰면 레이아웃이 깨지거나, 사이즈가 맞지 않는 등 원하는 대로 저장이 되지 않는 경우가 대부분이다.
이를 해결하기 위해 저는 다음의 방법을 사용하는데 pdf 저장에 어려움을 겪고 있는 분들에게 도움이 됐으면 한다. OSX 기준으로 설명하겠다.
Step 1. 웹폰트 지원 phantomjs 다운 받기
http://arunoda.me/blog/phantomjs-webfonts-build.html 에서 웹폰트 지원을 추가한 phantomjs를 다운 받아서 압축을 푼다. 그러면 phantomjs 실행 파일을 얻을 수 있다.
Step 2. revealjs-capture 설치
이 방법의 핵심인 revealjs-capture를 설치한다. revealjs-capture는 phantomjs를 이용해서 reveal.js로 만들어진 슬라이드를 이미지 파일로 뽑아내는 도구이다.
$ npm install revealjs-capture
Step 3. phantomjs 덮어 쓰기
step 1에서 추출한 phantomjs를 revealjs-capture가 설치한 phantomjs에 덮어쓴다.
$ cp phantomjs node_modules/revealjs-capture/node_modules/phantomjs/lib/phantom/bin/
Step 4. revealjs-capture 수정 하기
revealjs-capture가 생성하는 이미지는 브라우저 뷰포트를 크게 잡어서 슬라이드 내용보다 여백이 너무 크게 보인다. 그리고 생성된 이미지 파일명이 정렬하기에 불편하게 되어 있다. 이를 보안하기 위해서 revealjs-capture.js를 수정한다.
$ vi node_modules/revealjs-capture/lib/revealjs_capture.js
// 41 line
this.page.viewportSize = { width: 1280, height: 1000 };
// 133 line
this.page.render(this.options.output + 'slide-' + ('000' + slideIndices.h).slice(-3) + '-' + slideIndices.v + '.png');
Step 5. reveal.js 슬라이드를 이미지로 변환하기
자, 이제 슬라이드에서 이미지를 뽑아 보자.
$ node_modules/.bin/revealjs-capture -s slide_url
Step 6. 생성된 이미지를 pdf로 변환하기
생성된 이미지를 pdf로 변환하기 위해서는 imageMagick이란 라이브러리가 제공하는 convert 도구를 사용한다. imageMagick은 homebrew를 이용해서 설치를 한다.
$ brew install imagemagick
$ convert *.png slide.pdf