html to pdf (with nodeJs)

Qoontree 에서 Qdiary 에 저장된 일기들을 사진과 함께 포토북을 만드는 서비스를 진행하기 위하여 pdf을 생성하는 process 가 필요하였다.

server side 에서 진행하기로 하였고 pdf 자체를 만드는 방법과 html file 을 pdf 로 변환하는 방법이 있었다.

전자는 utf8 인코딩 문제와 font 문제등 여러가지로 lean 하지 않아서 html file 을 pdf로 변환 하는 방법을 채택 하였다.

node 모듈중 html-pdf 라는 모듈을 사용하였다.

1.size

html body 테그에 어떠한 width 값을 주지 않는한 body 의 width 가 a4용지 width 에 맞춰서 출력된다.

이 말을 오해하면 안되는것이 body 의 끝과 끝이 pdf 변환했을때의 용지의 끝과 끝이다.

그렇기 때문에 width 는 body 의 크기를 상속받는 단위 % 를 사용하면 조금 편해진다.

사실 처음에는 body width 를 제한을 주어 px로 맞춰했으나 수많은 노가다 이후 이 방법이 제일 나에게 잘 맞다는것을 알수 있었다.

% 단위는 자신의 바로위에 있는 부모의 크기를 상속받아 그 크기를 100%로 잡는다.

height 는 a4 용지의 height 가 842 px 이라고 하는데

div {
border: 1px;
height: 842px;
}

이렇게 해놓고 pdf 로 만들어 보면 1페이지를 넘어간다.

대략 820px 로 하면 맞는다.

수많은 노가다를 통해서 얻어낸 사실은 대략 html 1px 당 0.3007mm정도이라는 것이다.

각 feature 의 크기들은 저렇게 하면 대략 맞는데 문제는

전체 용지의 크기는 또 다르다는 것이다.

무슨 말이고 하니…

근데.. 842px * o.3007 을 하면 253mm가 나오는데 실제 a4의 height 는 300mm 정도다.

그러니 각자 노가다를 통해서 맞추길 바란다.

저 위에 820px 가 대략 한페이지를 나눌수 있는 height 이고, padding 이나 image 의 width, heigth 는 1px 당 0.3007 로 계산하면 오차범위 5mm안에서 맞는다.

사실 이 html-pdf 라는 모듈이 phantomjs 라는 모듈 위에서 돌아가는 것이기 때문에 phantomjs의 버전에 따라 또 달라질것 같다.

필자는 2.1.7 버전을 사용하였다. node 는 4.4.1 v , 5.10.0 v 으로 했는데

ubuntu 에서는 5.10.0, Mac 에서는 4.4.1 의 환경에서 시행했다.

2.html-pdf module

html file 을 pdf로 변환해 주는 모듈이다.

자세한 내용은 npm html-pdf 에서 볼수 있다.

css는 html file 에 style 태그를 이용하던지 아니면 config 를 이용하여 html file 로딩에 필요한 경로를 넣어주고, 그 경로를 통해 include 시키면 된다.

background 는 config 에서 page options 을 지정하지 않으면 적용이 가능하나 page options 을 지정하면 background css 가 적용되지 않는다 .

적용 시키기 위한 편법은 defalut page options 을 변경하는 것이다 .

/node_modules/html-pdf/lib/scripts/pdf_a4_portrait.js 파일에

function definePaperOrientation (options) {
var paper = {border: options.border || '0'}

if (options.height && options.width) {
paper.width = options.width
paper.height = options.height
} else {
// change format //
paper.format = options.format || 'A4'
paper.orientation = options.orientation || 'portrait'
}

// paper.width = '128mm';
// paper.height = '188mm';

return paper
}

// change format // 부분 처럼 default page orientation 을 변경하면

config 에서 page option을 건드리지 않기 때문에 background 적용이 가능하다.

3.etc modules

imagemagick, nodemailer 두가지 모듈을 더 사용하였다.

1.imagemagick

imagemagick 은 image 변환, resize, croping 등을 하는 모듈이다.

굉장히 파워풀하고 사용도 쉽다.

2.nodemailer

nodemailer는 mailing service 를 가능하게 해주는 모듈이다.

gmail을 smtp 로 사용할시 보안문제가 있어서, 보안을 허용해줘야 한다.

: https://accounts.google.com/DisplayUnlockCaptcha

위의 링크가 도움이 될것이다.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.