안녕하세요. CX사업부 MD 태태입니다.
오래간만에 PhantomJS 를 이용하여 PDF를 생성하는 글을 포스팅합니다.
지난 3번의 포스팅을 통하여 기본적인 PhantomJS를 통한 PDF출력에 대해 살펴보았는데, 이번 글에서는 PhantomJS에서 제공하는 다양한 Event listener에대해 살펴보겠습니다.
웹화면을 PDF형식으로 출력하다보면 예상치않은 웹상의 오류에 대해 대처해야하거나, JavaScript로직의 실행시점을 알아야 하는등 다양한 문제가 발생할 수 있습니다. 이럴 때 사용할 수 있도록 PhantomJS는 몇가지 Event listener를 제공해주고 있는데, 이번 포스팅에서는 webPonent 제품을 개발할 때 유용하게 사용되었던 것들을 중심으로 소개하고 설명해드리도록 하겠습니다.
- onError
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
var webPage = require('webpage');
var page = webPage.create();
page.onError = function(msg, trace) {
var msgStack = ['ERROR: ' + msg];
if (trace && trace.length) {
msgStack.push('TRACE:');
trace.forEach(function(t) {
msgStack.push(' -> ' + t.file + ': ' + t.line + (t.function ? ' (in function "' + t.function +'")' : ''));
});
}
console.error(msgStack.join('\n'));
};
page.open('http://test.com/', function(status) {
console.log('Status: ' + status);
phantom.exit();
});
|
cs |
|
1
2
3
4
5
6
7
8
9
10
11
|
<html>
<head>
<title></title>
</head>
<body>
<h1>테스트 페이지입니다.</h1>
<script>
console.log(value);
</script>
</body>
</html>
|
cs |
설명이 필요하지 않을정도로 간단한 HTML코드입니다. 단, 스크립트에서 콘솔로 value라는 변수를 출력하는데 코드 어디에도 value변수를 선언하지 않았지요. 스크립트 오류가 발생할 것입니다.
이제 결과를 확인해 보겠습니다.
콘솔창에 JavaScript에러 메세지가 출력된 것을 확인할 수 있습니다. 이렇게 onError 리스너는 스크립트 에러와 같은 페이지상의 에러가 발생했을 때 실행되는 이벤트리스너입니다.
- onConsoleMessage
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
var webPage = require('webpage');
var page = webPage.create();
page.onError = function(msg, trace) {
var msgStack = ['ERROR: ' + msg];
if (trace && trace.length) {
msgStack.push('TRACE:');
trace.forEach(function(t) {
msgStack.push(' -> ' + t.file + ': ' + t.line + (t.function ? ' (in function "' + t.function +'")' : ''));
});
}
console.error(msgStack.join('\n'));
};
page.onConsoleMessage = function(msg) {
console.log('CONSOLE: ' + msg);
};
page.open('http://test.com/', function(status) {
console.log('Status: ' + status);
phantom.exit();
});
|
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<html>
<head>
<title></title>
</head>
<body>
<h1>테스트 페이지입니다.</h1>
<script>
var value = "This is PhantomJS test page.";
console.log(value);
</script>
</body>
</html>
|
cs |
'This is PhantomJS test page.'라는 메시지가 출력되었지요. 위 페이지코드의 스크립트 실행결과와 완전히 동일한 결과입니다. 이 리스너또한 페이지의 로그를 확인하고 싶을 때 유용하게 사용되는 리스너입니다.
- onInitialized
- onLoadFinished
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
var webPage = require('webpage');
var page = webPage.create();
page.onError = function(msg, trace) {
var msgStack = ['ERROR: ' + msg];
if (trace && trace.length) {
msgStack.push('TRACE:');
trace.forEach(function(t) {
msgStack.push(' -> ' + t.file + ': ' + t.line + (t.function ? ' (in function "' + t.function +'")' : ''));
});
}
console.error(msgStack.join('\n'));
};
page.onConsoleMessage = function(msg) {
console.log('CONSOLE: ' + msg);
};
page.onInitialized = function() {
console.log("onInitialized");
}
page.onLoadFinished = function (status) {
console.log("onLoadFinished Status : " + status);
}
page.open('http://test.com/', function(status) {
console.log('Status: ' + status);
phantom.exit();
});
|
cs |
확인결과 onInitialized 이벤트가 먼저 발생되고 (Page opened) onLoadFinished 이벤트가 발생된 후 page.open() 함수의 콜백함수가 실행되는 것을 확인 할 수 있습니다.
이 결과에 따라서 onInitialized 이벤트 리스너에는 페이지가 로딩되기 전 등록해야 하는 웹 이벤트 리스너를 등록하거나 변수, 객체를 선언하는 용도로 사용하고, onLoadFinished 리스너에 페이지가 로딩된 후의 동작을 등록해서 사용하면 시점이 어긋나지 않고 사용할 수 있을 것입니다.
- onCallback
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<html>
<head>
<title></title>
</head>
<body>
<h1>테스트 페이지입니다.</h1>
<script>
if (typeof window.callPhantom === 'function') {
var status = window.callPhantom({
message: 'Hello'
});
console.log(status);
}
</script>
</body>
</html>
|
cs |
먼저 onCallback 리스너 테스트를 위한 HTML 코드입니다. 스크립트상에서 window.callPhantom 객체가 function type으로 존재하면 JSON Object를 인자로 넘겨서 호출합니다. 이 때의 결과값을 status변수에 저장한 후 console에 출력하는 로직이 작성되어 있습니다.
이 페이지를 여는 PhantomJS script를 보면 다음과 같습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
var webPage = require('webpage');
var page = webPage.create();
page.onCallback = function(data) {
if (data && data.message && (data.message.toLowerCase() === 'hello')) {
return "World!";
} else {
return 'Say hello please.';
}
};
page.onConsoleMessage = function(msg) {
console.log('CONSOLE: ' + msg);
};
page.open('http://localhost:1010/', function(status) {
phantom.exit();
});
|
cs |
onCallback 이벤트 리스너를 등록하여서 data 객체의 message가 'hello'이면 'World!'를 아니면 'Say hello please.'를 반환하는 로직을 작성했습니다. 이 로직의 결과를 살펴보겠습니다.
2번째 결과는 message 요소에 'hello'대신 다른 문자열을 대입하고 실행해본 결과입니다. onConsoleMessage를 통해 출력된 콘솔메세지를 확인하실 수 있습니다. 이 리스너를 통해 조금 더 세부적으로 시점을 알 수 있습니다.
이정도가 가장 유용하게 쓰일 수 있는 이벤트 리스너입니다. 이렇듯 리스너를 사용하면 훨씬 더 세부적이고 디테일한 시점에따른 기능을 추가할 수 있습니다. 비단 PDF출력 뿐 아니라도 PhantomJS의 여러기능들을 사용할 때 활용하실 수 있었으면 좋겠습니다.
'CyberI 제품소개 > UI컴포넌트' 카테고리의 다른 글
| [웹포넌트 가상키보드] 다운로드부터 설치까지!! (0) | 2016.03.11 |
|---|---|
| [웹포넌트 가상키보드] 웹 사이트를 안전하게 만드는 가장 손쉬운 방법 (0) | 2016.01.23 |
| [웹포넌트 그리드] 일반 HTML 테이블의 한계를 뛰어넘는 데이터 그리드! (1) | 2015.12.11 |
| PhantomJS로 GRID&CHART를 PDF 출력하기 (3편 : Header & Footer에 이미지 넣기) (0) | 2015.08.22 |
| PhantomJS로 GRID&CHART를 PDF 출력하기 (2편 : 페이지설정, Header & Footer ) (0) | 2015.07.24 |