[자바스크립트 + php] pdf 파일 만들때 1페이지에 맞춤해서 출력하는 방법

이것도 하루 종일 연구하다 이리찾고 저리찾고 많은 시행착오끝에  결국 해냈습니다.

결과코드를 올려보니, 참고하실분들 도움이 될 것 같습니다.

pagebreak라는 기법이 있는데, 이것 좋네요.

실제 pdf 출력해 보니.. 잘됩니다.

class="pagebreak"라는 것을 문서의 마지막에 넣어줘야 합니다.

처음에 쳇GPT가 첫머리에 넣어줘서 계속 공백이 발생하는데, 지피티가 엉뚱한 답을 계속줘서 좀 해멨습니다.

 

 

페이지가 분리되서 잘 나오는 것을 확인했습니다.

이 기법 잘 사용할 것 같네요...

자바스크립트는 

// 페이지 로딩
$(document).ready(function() {
    var loader = document.getElementById('loadingOverlay');
    loader.style.display = 'none';
});
function generatePDF() {
    var d = new Date();
    var currentDate = (d.getMonth() + 1) + "-" + d.getDate() + "_";
    var currentTime = d.getHours() + "_" + d.getMinutes() + "_" + d.getSeconds();
    var result = 'DH모터출고증_' + currentDate + currentTime + '.pdf';

    var element = document.getElementById('content-to-print');
    var opt = {
        margin: 0,
        filename: result,
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
    };
    html2pdf().from(element).set(opt).save();
}

html2pdf() 라이브러리 사용했습니다. 이게 깔끔하고 좋네요~

<?php
require_once($_SERVER['DOCUMENT_ROOT'] . "/session.php");
// 첫 화면 표시 문구
$title_message = 'DH모터 출고증';
$tablename = 'motor';

if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['recordIds'])) {
    $recordIds = $_POST['recordIds'];
} else {
    die('Invalid request.');
}

require_once($_SERVER['DOCUMENT_ROOT'] . "/lib/mydb.php");
$pdo = db_connect();
?>

<?php include $_SERVER['DOCUMENT_ROOT'] . '/load_header.php'; ?>

<title> <?=$title_message?> </title>

<style>
    .smallfont {
        border: 0.5px solid #ccc !important;
        font-size: 11px !important;
        padding: 1px;
    }
    table, th {
        border: 0.5px solid #ccc !important;
        font-size: 15px !important;
        padding: 0px;
    }
    @media print {
        body {
            width: 210mm; /* Approx width of A4 paper */
            height: 297mm; /* Height of A4 paper */
            margin: 5mm; /* Provide a margin */
            font-size: 10pt; /* Reduce font size for printing */
        }
        .table th, .table td {
            padding: 1px;
        }
        .text-center {
            text-align: center;
        }
    }
    td {
        padding-top: 1px;
        padding-bottom: 1px;
        border: 0.5px solid #ccc !important; /* 가늘고 옅은 회색 테두리 */
        font-size: 14px !important;
        padding-left: 1px; /* 좌측 여백 */
        padding-right: 1px; /* 우측 여백 */
    }
    .pagebreak { page-break-before: always; }
</style>

<div class="container mt-2">
    <div class="d-flex align-items-center justify-content-end mt-1 m-2">
        <button class="btn btn-dark btn-sm me-1" onclick="generatePDF()"> PDF 저장 </button>
        <button class="btn btn-secondary btn-sm" onclick="self.close();"> <i class="bi bi-x-lg"></i> 닫기 </button>&nbsp;
    </div>
</div>

<div id="content-to-print">    
    <?php
    foreach ($recordIds as $num) {
        try {
            $sql = "select * from " . $DB . ".motor where num = ?";
            $stmh = $pdo->prepare($sql);
            $stmh->bindValue(1, $num, PDO::PARAM_STR);
            $stmh->execute();
            $count = $stmh->rowCount();
            if ($count < 1) {
                print "검색결과가 없습니다.<br>";
            } else {
                $row = $stmh->fetch(PDO::FETCH_ASSOC);
                include "_row.php";
                if ($deliverymethod == '화물') {
                    // 상차지에 화물지점표기함
                    $address = $delbranch . (!empty($delbranchaddress) ? ' (' . $delbranchaddress . ')' : '');
                    $loadplace = '(주)대한 본사';
                }
                if ($deliverymethod == '직배송') {
                    // 상차지에 화물지점표기함
                    $loadplace = '(주)대한 본사';
                }
                ?>

                <div class="container mt-3 ">
                    <div class="d-flex align-items-center justify-content-center mt-2 mb-2">
                        <h3> DH 모터 출고증 </h3>
                    </div>
                    <div class="d-flex align-items-center justify-content-end mb-1">
                        <h6> 출고 담당자 : 노영재 차장 </h6>
                    </div>
                    <div class="d-flex align-items-center justify-content-center mb-1">
                        <table class="table">
                            <tbody>
                                <tr>
                                    <td class="text-center smallfont" style="width:130px;"> 발주 접수일</td>
                                    <td class="text-center smallfont" style="width:130px;"> <?=$orderdate?></td>
                                    <td class="text-center smallfont" style="width:130px;"> 출고예정일</td>
                                    <td class="text-center smallfont"> <?=$deadline?></td>
                                    <td class="text-center smallfont">출고일</td>
                                    <td class="text-center smallfont" style="width:110px;"><?= $outputdate == '0000-00-00' ? '' : $outputdate ?></td>
                                </tr>
                                <tr>
                                    <td class="text-center smallfont">발주처</td>
                                    <td class="text-center smallfont"> <?=$secondord?></td>
                                    <td class="text-center smallfont">현장명</td>
                                    <td class="text-center smallfont" colspan="3"> <?=$workplacename?></td>
                                </tr>
                                <tr>
                                    <td class="text-center smallfont">발주 담당자</td>
                                    <td class="text-center smallfont"><?=$secondordman?></td>
                                    <td class="text-center smallfont">연락처</td>
                                    <td class="text-center smallfont" colspan="3"><?=$secondordmantel?></td>
                                </tr>
                                <tr>
                                    <td class="text-center smallfont"> 운송 방법</td>
                                    <td class="text-center smallfont"> <?=$deliverymethod?></td>
                                    <td class="text-center smallfont"> 배송지 주소</td>
                                    <td class="text-center smallfont" colspan="3"><?=$address?></td>
                                </tr>
                                <tr>
                                    <td class="text-center smallfont">받는 분</td>
                                    <td class="text-center smallfont"><?=$chargedman?></td>
                                    <td class="text-center smallfont">받는 분 tel</td>
                                    <td class="text-center smallfont" colspan="3"><?=$chargedmantel?></td>
                                </tr>
                                <tr>
                                    <td class="smallfont fw-bold" colspan="6"> &nbsp; &nbsp; * 출고 준비 중 문의사항이 있으면 발주처 담당자와 통화 후 출고 부탁드립니다.</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    <?php
                    // 모터 수량이 있나 체크한다.
                    $motor = json_decode($orderlist, true);
                    $firstitem = true;
                    $motorsu = 0;

                    foreach ($motor as $accessory) {
                        if ($accessory['col5'] == 'SET' || $accessory['col5'] == '모터단품') {
                            $motorsu += $accessory['col8'];
                        }
                    }
                    if ($motorsu > 0) {
                    ?>
                    <div class="d-flex align-items-center justify-content-start mt-1">
                    <h6> 1. DH 모터 </h6>
                    </div>
                    <div class="d-flex align-items-center justify-content-center mt-1">
                        <table class="table" style="padding:0px; margin:0px;">
                            <thead class="table-primary" style="padding:0 !important; margin:0 !important;">
                                <tr>
                                    <th class="text-center" style="padding:4 !important; margin:0 !important;">전원</th>
                                    <th class="text-center" style="padding:4 !important; margin:0 !important;">유무선</th>
                                    <th class="text-center" style="padding:4 !important; margin:0 !important;">구분</th>
                                    <th class="text-center" style="padding:4 !important; margin:0 !important;">용량</th>
                                    <th class="text-center" style="padding:4 !important; margin:0 !important;">수량</th>
                                    <th class="text-center" style="padding:4 !important; margin:0 !important;">로트번호</th>
                                    <th class="text-center" style="padding:4 !important; margin:0 !important;">전달사항</th>
                                    <th class="text-center" style="padding:4 !important; margin:0 !important;">준비완료체크</th>
                                    <th class="text-center" style="padding:4 !important; margin:0 !important;">비고</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php
                                foreach ($motor as $accessory) {
                                    if ($accessory['col5'] == 'SET' || $accessory['col5'] == '모터단품') {
                                        print '<tr>';
                                        print ' <td class="text-center" style="padding:4 !important; margin:0 !important;"> ' . $accessory['col1'] . ' </td>';
                                        print ' <td class="text-center" style="padding:4 !important; margin:0 !important;"> ' . $accessory['col2'] . ' </td>';
                                        print ' <td class="text-center" style="padding:4 !important; margin:0 !important;"> ' . $accessory['col3'] . ' </td>';
                                        print ' <td class="text-center" style="padding:4 !important; margin:0 !important;"> ' . $accessory['col4'] . ' </td>';
                                        print ' <td class="text-center" style="padding:4 !important; margin:0 !important;"> ' . $accessory['col8'] . ' </td>';
                                        print ' <td class="text-center" style="padding:4 ! important; margin:0 ! important;"> ' . $accessory['col13'] . ' </td>';
                                        print ' <td class="text-center" style="padding:4 ! important; margin:0 ! important;"> ' . $accessory['col14'] . ' </td>';
                                        print ' <td class="text-center" style="padding:4 ! important; margin:0 ! important;"> ' . '' . ' </td>';
                                        print ' <td class="text-center" style="padding:4 ! important; margin:0 ! important;"> ' . '' . ' </td>';
                                        print '</tr>';
                                    }
                                }
                                if ($motorsu > 0) {
                                    print '<tr>';
                                    print ' <td class="text-center" colspan="4" style="padding:4 ! important; margin:0 ! important;"> 모터수량 합 </td>';
                                    print ' <td class="text-center" colspan="1" style="padding:4 ! important; margin:0 ! important;"> ' . $motorsu . ' </td>';
                                    print '</tr>';
                                }
                                ?>
                            </tbody>
                        </table>
                    </div>
                    <?php } ?>
                    
                    <?php
                    $motor = json_decode($orderlist, true);
                    $firstitem = true;
                    $bracketsu = 0;

                    foreach ($motor as $accessory) {
                        if ($accessory['col5'] == '브라켓트' || $accessory['col5'] == 'SET') {
                            $bracketsu += $accessory['col8'];
                        }
                    }
                    if ($bracketsu > 0) {
                    ?>
                    <div class="d-flex align-items-center justify-content-start mt-1">
                    <h6> 2. 브라켓, 후렌지 </h6>
                    </div>
                    <div class="d-flex align-items-center justify-content-center mt-1">
                        <table class="table">
                            <thead class="table-info">
                                <tr>
                                    <th class="text-center" style="padding:4 ! important; margin:0 ! important;">브라켓트 크기</th>
                                    <th class="text-center" style="padding:4 ! important; margin:0 ! important;">후렌지</th>
                                    <th class="text-center" style="padding:4 ! important; margin:0 ! important;">수량</th>
                                    <th class="text-center" style="padding:4 ! important; margin:0 ! important;">로트번호</th>
                                    <th class="text-center" style="padding:4 ! important; margin:0 ! important;">전달사항</th>
                                    <th class="text-center" style="padding:4 ! important; margin:0 ! important;">준비완료체크</th>
                                    <th class="text-center" style="padding:4 ! important; margin:0 ! important;">비고</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php
                                foreach ($motor as $accessory) {
                                    if ($accessory['col5'] == '브라켓트' || $accessory['col5'] == 'SET') {
                                        print '<tr>';
                                        print ' <td class="text-center" style="padding:4 ! important; margin:0 ! important;"> ' . $accessory['col6'] . ' </td>';
                                        print ' <td class="text-center" style="padding:4 ! important; margin:0 ! important;"> ' . $accessory['col7'] . ' </td>';
                                        print ' <td class="text-center" style="padding:4 ! important; margin:0 ! important;"> ' . $accessory['col8'] . ' </td>';
                                        print ' <td class="text-center" style="padding:4 ! important; margin:0 ! important;"> ' . $accessory['col13'] . ' </td>';
                                        print ' <td class="text-center" style="padding:4 ! important; margin:0 ! important;"> ' . $accessory['col14'] . ' </td>';
                                        print ' <td class="text-center" style="padding:4 ! important; margin:0 ! important;"> ' . '' . ' </td>';
                                        print ' <td class="text-center" style="padding:4 ! important; margin:0 ! important;"> ' . '' . ' </td>';
                                        print '</tr>';
                                    }
                                }
                                if ($bracketsu > 0) {
                                    print '<tr>';
                                    print ' <td class="text-center" colspan="2" style="padding:4 ! important; margin:0 ! important;"> 수량 합 </td>';
                                    print ' <td class="text-center" colspan="1" style="padding:4 ! important; margin:0 ! important;"> ' . $bracketsu . ' </td>';
                                    print '</tr>';
                                }
                                ?>
                            </tbody>
                        </table>
                    </div>
                    <?php } ?>

                    <?php
                    $controller = json_decode($controllerlist, true);
                    if (is_array($controller)) {
                        $firstitem = true;
                        $controllersu = 0;
                        foreach ($controller as $accessory) {
                            $controllersu += $accessory['col3'];
                        }
                    }
                    if ($controllersu > 0) {
                    ?>
                    <div class="d-flex align-items-center justify-content-start mt-1">
                    <h6> 3. 연동제어기 </h6>
                    </div>
                    <div class="d-flex align-items-center justify-content-center mt-1">
                        <table class="table">
                            <thead class="table-success">
                                <tr>
                                    <th class="text-center" style="padding:4 ! important; margin:0 ! important;">구분</th>
                                    <th class="text-center" style="padding:4 ! important; margin:0 ! important;">수량</th>
                                    <th class="text-center" style="padding:4 ! important; margin:0 ! important;">로트번호</th>
                                    <th class="text-center" style="padding:4 ! important; margin:0 ! important;">전달사항</th>
                                    <th class="text-center" style="padding:4 ! important; margin:0 ! important;">준비완료체크</th>
                                    <th class="text-center" style="padding:4 ! important; margin:0 ! important;">비고</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php
                                if (is_array($controller)) {
                                    $firstitem = true;
                                    $controllersu = 0;
                                    foreach ($controller as $accessory) {
                                        print '<tr>';
                                        print ' <td class="text-center" style="padding:4 ! important; margin:0 ! important;"> ' . $accessory['col2'] . ' </td>';
                                        print ' <td class="text-center" style="padding:4 ! important; margin:0 ! important;"> ' . $accessory['col3'] . ' </td>';
                                        print ' <td class="text-center" style="padding:4 ! important; margin:0 ! important;"> ' . $accessory['col8'] . ' </td>';
                                        print ' <td class="text-center" style="padding:4 ! important; margin:0 ! important;"> ' . $accessory['col9'] . ' </td>';
                                        print ' <td class="text-center" style="padding:4 ! important; margin:0 ! important;"> ' . '' . ' </td>';
                                        print ' <td class="text-center" style="padding:4 ! important; margin:0 ! important;"> ' . '' . ' </td>';
                                        print '</tr>';
                                        $controllersu += $accessory['col3'];
                                    }
                                    if ($controllersu > 0) {
                                        print '<tr>';
                                        print ' <td class="text-center" colspan="1" style="padding:4 ! important; margin:0 ! important;"> 수량 합 </td>';
                                        print ' <td class="text-center" colspan="1" style="padding:4 ! important; margin:0 ! important;"> ' . $controllersu . ' </td>';
                                        print '</tr>';
                                    }
                                }
                                ?>
                            </tbody>
                        </table>
                    </div>
                    <?php } ?>

                    <?php
                    $accessories = json_decode($accessorieslist, true);
                    if (is_array($accessories)) {
                        $firstitem = true;
                        $etcsu = 0;
                        foreach ($accessories as $accessory) {
                            $etcsu += $accessory['col2'];
                        }
                    }
                    if ($etcsu > 0) {
                    ?>
                    <div class="d-flex align-items-center justify-content-start mt-1">
                    <h6> 4. 기타 부속 </h6>
                    </div>
                    <div class="d-flex align-items-center justify-content-center mt-1">
                        <table class="table">
                            <thead class="table-secondary">
                                <tr>
                                    <th class="text-center" style="padding:4 ! important; margin:0 ! important;">구분</th>
                                    <th class="text-center" style="padding:4 ! important; margin:0 ! important;">수량</th>
                                    <th class="text-center" style="padding:4 ! important; margin:0 ! important;">전달사항</th>
                                    <th class="text-center" style="padding:4 ! important; margin:0 ! important;">준비완료체크</th>
                                    <th class="text-center" style="padding:4 ! important; margin:0 ! important;">비고</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php
                                if (is_array($accessories)) {
                                    $firstitem = true;
                                    $etcsu = 0;
                                    foreach ($accessories as $accessory) {
                                        print '<tr>';
                                        print ' <td class="text-center" style="padding:4 ! important; margin:0 ! important;"> ' . $accessory['col1'] . ' </td>';
                                        print ' <td class="text-center" style="padding:4 ! important; margin:0 ! important;"> ' . $accessory['col2'] . ' </td>';
                                        print ' <td class="text-center" style="padding:4 ! important; margin:0 ! important;"> ' . $accessory['col5'] . ' </td>';
                                        print ' <td class="text-center" style="padding:4 ! important; margin:0 ! important;"> ' . '' . ' </td>';
                                        print ' <td class="text-center" style="padding:4 ! important; margin:0 ! important;"> ' . '' . ' </td>';
                                        print '</tr>';
                                        $etcsu += $accessory['col2'];
                                    }
                                    if ($etcsu > 0) {
                                        print '<tr>';
                                        print ' <td class="text-center" colspan="1" style="padding:4 ! important; margin:0 ! important;"> 수량 합 </td>';
                                        print ' <td class="text-center" colspan="1" style="padding:4 ! important; margin:0 ! important;"> ' . $etcsu . ' </td>';
                                        print '</tr>';
                                    }
                                }
                                ?>
                            </tbody>
                        </table>
                    </div>
                    <?php } ?>
                </div>
                <div class="container pagebreak"> </div>				
                <?php
            }
        } catch (PDOException $Exception) {
            print "오류: " . $Exception->getMessage();
        }
    }
    ?>
</div> <!-- end of content-to-print -->

<script>

// 페이지 로딩
$(document).ready(function() {
    var loader = document.getElementById('loadingOverlay');
    loader.style.display = 'none';
});
function generatePDF() {
    var d = new Date();
    var currentDate = (d.getMonth() + 1) + "-" + d.getDate() + "_";
    var currentTime = d.getHours() + "_" + d.getMinutes() + "_" + d.getSeconds();
    var result = 'DH모터출고증_' + currentDate + currentTime + '.pdf';

    var element = document.getElementById('content-to-print');
    var opt = {
        margin: 0,
        filename: result,
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
    };
    html2pdf().from(element).set(opt).save();
}
</script>