BLO9
Kotlin 등 개발 관련 포스팅합니다.
PhantomJS screen capture PDF 다중 페이지 프린트

PhantomJS(팬텀제이)에서 PDF로 Screen capture를 하면 단일 페이지로 출력이 됩니다. 하지만 CSS를 이용해 mutli page/다중페이지로 출력할 수 있습니다.

capture_a4.js

page.paperSize = {
    format: 'A4',
    orientation: 'portrait'
};
page.open('capture_a4.html', function() {
    page.render('capture_a4_output.pdf');
    phantom.exit();
});

capture_a4.html


<style>
    body {
        background-color: rgba(0, 0, 0, .3);
        padding: 0px;
        margin: 0px;
    }
    @media print {
        body {
            // background색 프린트
            -webkit-print-color-adjust: exact;
        }
        .page {
            page-break-after: always;
        }
    }
    #page-1 {
        background: rgba(255, 0, 0, .4);
    }
    #page-2 {
        background-color: rgba(255, 255, 0, .4);
    }
    #page-3 {
        background-color: rgba(0, 0, 255, .4);
    }
</style>

<div id="page-1" class="page">페이지 1</div>
<div id="page-2" class="page">페이지 2</div>
<div id="page-3" class="page">페이지 3</div>

결과