PDF 뷰어

좋은 정보 감사합니다

모바일은 별도 구성 참조 드립니다

https://www.11q.kr/bbs/board.php?bo_table=cording&wr_id=28

다음 소스를  본계시글 pdf.js 없이

            <!-- PC용 PDFObject -->

            <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfobject/2.2.8/pdfobject.min.js"></script>

            <!-- 모바일용 PDF.js -->

            <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
구성으로 

W:\g5\skin\board\BS4-Basic-Webzine_11q\view.skin.php
에 추가만 하면 됩니다

 

<hr class="hr"/>

 

<!-- PDF 보기 2025_0923_2350_29 -->

<!--  PDF 버튼 클릭으로 보기동작및 PDF 보기 영역을 본문 내용 끝 에 추가  -->

 

<!-- PDF 보기 (다중 PDF, PC/모바일 통합, 실제 첨부 기반) -->

<?php

if (isset($view['file']) && is_array($view['file'])) {

    $pdfIndex = 0; // 각 PDF마다 고유 ID 부여

    foreach ($view['file'] as $file) {

        $ext = strtolower(pathinfo($file['source'], PATHINFO_EXTENSION));

 

        if ($ext === 'pdf') {

            $pdfIndex++;

            $pdf_url = G5_DATA_URL.'/file/'.$bo_table.'/'.$file['file'];

            $pdf_path = G5_DATA_PATH.'/file/'.$bo_table.'/'.$file['file'];

            $pdf_base64 = file_exists($pdf_path) ? base64_encode(file_get_contents($pdf_path)) : '';

            $btnId = "pdfToggleBtn_$pdfIndex";

            $containerId = "pdfcontainer_$pdfIndex";

            ?>

            <div style="margin:20px 0">

                <button id="<?php echo $btnId; ?>">첨부된 PDF 바로보기 (<?php echo $file['source']; ?>)</button>

            </div>

            <div id="<?php echo $containerId; ?>" style="width:100%; max-height:100vh; overflow-y:auto; border:1px solid #ccc; display:none;"></div>

 

            <!-- PC용 PDFObject -->

            <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfobject/2.2.8/pdfobject.min.js"></script>

            <!-- 모바일용 PDF.js -->

            <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>

 

            <script>

                (function() {

                    const btn = document.getElementById("<?php echo $btnId; ?>");

                    const container = document.getElementById("<?php echo $containerId; ?>");

                    let isPdfOpen = false;

 

                    btn.addEventListener("click", function () {

                        if (!isPdfOpen) {

                            container.innerHTML = "";

                            container.style.display = "block";

 

                            if (/Mobi|Android/i.test(navigator.userAgent)) {

                                // 모바일 → PDF.js Base64 렌더링

                                const pdfData = atob("<?php echo $pdf_base64; ?>");

                                pdfjsLib.getDocument({ data: pdfData, disableWorker: true }).promise.then(function(pdf) {

                                    let pageNum = 1;

                                    function renderPage() {

                                        if (pageNum > pdf.numPages) return;

                                        pdf.getPage(pageNum).then(function(page) {

                                            const canvas = document.createElement("canvas");

                                            const ctx = canvas.getContext("2d");

                                            const containerWidth = container.clientWidth;

                                            const viewport = page.getViewport({ scale: 1 });

                                            const scale = containerWidth / viewport.width;

                                            const scaledViewport = page.getViewport({ scale: scale });

 

                                            canvas.width = scaledViewport.width;

                                            canvas.height = scaledViewport.height;

 

                                            page.render({ canvasContext: ctx, viewport: scaledViewport }).promise.then(() => {

                                                container.appendChild(canvas);

                                                pageNum++;

                                                renderPage();

                                            });

                                        });

                                    }

                                    renderPage();

                                }).catch(err => {

                                    container.innerHTML = "PDF 로딩 실패: " + err.message;

                                });

                            } else {

                                // PC → PDFObject 사용

                                PDFObject.embed("<?php echo $pdf_url; ?>", "#<?php echo $containerId; ?>", {

                                    width: "100%",

                                    height: "800px",

                                    pdfOpenParams: { view: "FitH" }

                                });

                            }

 

                            btn.textContent = "PDF 닫기";

                            isPdfOpen = true;

                        } else {

                            container.innerHTML = "";

                            container.style.display = "none";

                            btn.textContent = "첨부된 PDF 바로보기 (<?php echo $file['source']; ?>)";

                            isPdfOpen = false;

                        }

                    });

                })();

            </script>

            <?php

        }

    }

}

?>

<!-- PDF 보기 끝 -->

 

 

 

<!-- PDF.js 버튼 및 뷰어 끝 -->