[Node.js] node.js로 PDF 문서 생성하기[Node.js] node.js로 PDF 문서 생성하기

Posted at 2019. 4. 11. 19:58 | Posted in Node.js



참고 : 자바스크립트와 Node.js를 이용한 웹 크롤링 테크닉




■ PDFKit을 이용한 PDF문서 출력



node.js를 활용하여 PDF 문서를 출력해 보려고 한다.


PDFKit이라고 하는 라이브러리가 node.js 용으로 공개되어 있어 PDF를 쉽게 만들어 낼 수 있다.


npm을 사용하여 PDFKit을 설치한다.



 $ npm install pdfkit 

 



설치가 완료 되었다면 아래 코드와 같이 PDF 파일을 만들어 보도록 하자.



# 소스코드

 pdfkit-test.js

// 모듈로드

const pdfDocument = require('PDFKit');

const fs = require("fs");


// 도큐먼트 생성

let doc = new pdfDocument();


// 출력파일 지정

doc.pipe(fs.createWriteStream("output.pdf"));


// 폰트지정 - 나눔고딕 사용(한글폰트를 사용해야 한다.)

doc.font("NanumGothic.ttf");


// 문자표시 

doc.fontSize(30).text("Wicked_MISO", 90, 100);

doc.fontSize(20).text("사악미소", 100, 180);


// 도형 그리기

doc.save()

.moveTo(80, 80)

.lineTo(300, 80)

.lineTo(300, 150)

.lineTo(80, 150)

.lineTo(80, 80)

.stroke("#0000FF");


// 페이지 추가

doc.addPage();


// 도형 그리기

doc.save()

.moveTo(100, 150)

.lineTo(100, 250)

.lineTo(200, 250)

.fill("#FF0000");


// 종료

doc.end();



.fongSize( ) : 크기를 지정하고

.text( ) : 출력할 텍스트와 표시 위치를 지정한다

화면의 왼쪽 위 좌표가 (0, 0)이고 밑으로 내려갈 수록 수치가 높아진다.


메소드

의 미

 .moveTo(x, y)

 · 도형의 시작 좌표를 지정한다.

 .lineTo(x, y)

 · 이전 좌표에서(x, y)로 선을 긋는다.

 .stroke(color)

 · 지정한 좌표들에 선을 긋는다.

 .fill(color)

 · 지저안 좌표들을 칠한다. 





# 출력결과

 $ node pdfkit-test.js






■ PDFKit을 이용한 PDF문서 출력



# 소스코드

 pdfkit-graph.js

// 모듈로드

const pdfDocument = require("PDFKit");

const fs = require("fs");


// 그래프 데이터

var data = [

  { label:"트와이스", value:96 }

, { label:"레드벨벳", value:90 }

, { label:"블랙핑크", value:74 }

, { label:"여자친구", value:85 }

, { label:"러블리즈", value:93 }

, { label:"모모랜드", value:89 }

, { label:"아이즈원", value:69 }

, { label:"우주소녀", value:71 }

];


// 도큐먼트

var doc = new pdfDocument();

var page_w = doc.page.width;

var page_h = doc.page.height;


// 출력파일 설정

doc.pipe(fs.createWriteStream("output-graph.pdf"));


// 폰트 설정

doc.font("NanumGothic.ttf");


// 타이틀 표시

doc.fontSize(30).text("걸그룹", 20, 20);


// 그래프 그리기

var margin = 20;

var g_w = page_w - margin * 2 -50;

var g_x = margin + 50;

var y = 80;

var wpx = g_w / 100;


for(var i = 0; i < data.length; i++) {

var value = data[i].value;

var label = data[i].label;

doc.save()

.rect(g_x, y, wpx * value, 20)

.fill((i % 2) ? "blue" : "red");

doc.fontSize(10)

.fillColor("black")

.text(label, 30, y + 5)

.text(value, g_x + 5, y + 5);

y += 20 + 5;

}


// 편집종료

doc.end();




# 출력결과

 $ node pdfkit-graph.js



여기서는 doc.rect( ) 메소드를 사용하여 각 값의 막대 그래프를 그리고 있다.


PDFKit이 외에도 여러가지 도형을 그릴 수 있는 메소드가 준비되어있다.



메소드 이름

설명

 .rect(x, y, width, height)

 · 직사각형 그리기

 .roundRect(x, , width, height, conerRadius)

 · 모퉁이가 둥근 사각형 그리기

 .ellipse(cx, cy, radiusX, radiusY)

 · 타원 그리기

 .circle(cx, cy, radius)

 · 원 그리기

 .poygon(points...)

 · 다각형 그리기

 .path(pathData)

 · SVG의 path 지정하여 그리기







  1. 웅이
    안녕하세요, 포스팅 잘 봤습니다.
    PDFKit으로, 예를들면 값이 배치된 이력서 화면도 그대로 pdf로 만들 수 있나요 ?
    제 말은, PDF화면을 직접 그리는게 아니라 동적으로 만들어지는 페이지 화면 그대로를 pdf로 만들 수 있는지 질문 드립니다 ㅠㅠ
    • 2020.02.27 12:10 신고 [Edit/Del]
      출력할 데이터를 입력받고 그 데이터를 PDF로 출력하는 형태라, 출력한 검색 데이터를 바탕으로 다시 돌리는거라
      동적으로 변하는 검색데이터를 바탕으로 다시 생성해서 처리해야 할것 같네요

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기