더 나은 프로그래머가 되자

PDF VIEWER 구현하기 본문

언어/PHP

PDF VIEWER 구현하기

greathuman 2024. 7. 3. 13:25

1. iframe 사용

<iframe src="http://홈페이지주소/test.pdf" style="width:800px; height:700px;" frameborder="0"></iframe>

 

2. 구글뷰어 이용

<iframe src="http://docs.google.com/gview?url=http://홈페이지주소/test.pdf&embedded=true" style="width:800px; height:700px;" frameborder="0"></iframe>

 

3. OBJECT 이용

<object type="application/pdf" data="http://홈페이지주소/test.pdf" width="800" height="800">
<param name="src" value="http://홈페이지주소/test.pdf">
</object>

 

4. php 이용

<?php
    $file = './test.pdf';
    $filename = 'test.pdf';

    header('Content-type: application/pdf');
    header('Content-Disposition: inline; filename="'.$filename . '"');
    header('Content-Transfer-Encoding: binary');
    header('Content-Length: ' . filesize($file));
    header('Accept-Ranges: bytes');

    @readfile($file);
?>
<iframe src="./viewer.php" style="width:700px; height:800px;" frameborder="0"></iframe>

 

5. PDF.js 사용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PDF.js Example - All Pages</title>
    <style>
        #pdf-viewer {
            width: 100%;
            height: 100vh;
            overflow: auto;
        }
        canvas {
            display: block;
            margin: 10px auto;
        }
    </style>
</head>
<body>
    <div id="pdf-viewer"></div>

    <!-- Include PDF.js library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.3.122/pdf.min.js"></script>
    <script>
        const url = 'YOUR_PDF_URL';

        // Load the PDF.js library
        const pdfjsLib = window['pdfjs-dist/build/pdf'];

        // Specify the workerSrc property
        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.3.122/pdf.worker.min.js';

        // Load the PDF document
        const loadingTask = pdfjsLib.getDocument(url);
        loadingTask.promise.then(pdf => {
            console.log('PDF loaded');

            const viewer = document.getElementById('pdf-viewer');

            // Loop through each page
            for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
                // Fetch the page
                pdf.getPage(pageNum).then(page => {
                    console.log(`Page ${pageNum} loaded`);

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

                    // Prepare canvas using PDF page dimensions
                    const canvas = document.createElement('canvas');
                    const context = canvas.getContext('2d');
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;

                    // Append the canvas to the viewer container
                    viewer.appendChild(canvas);

                    // Render the PDF page into the canvas context
                    const renderContext = {
                        canvasContext: context,
                        viewport
                    };
                    page.render(renderContext).promise.then(() => {
                        console.log(`Page ${pageNum} rendered`);
                    });
                });
            }
        }).catch(error => {
            console.error('Error loading PDF: ', error);
        });
    </script>
</body>
</html>

 

 

출처 : https://blog.naver.com/joaweb/220687275667

 

[TIP] 웹상에서 PDF VIEWER 구현하기

웹상에서 PDF Viewer 구현하기 익스플로어는 10이상에서 정상적으로 출력됩니다. <1안> IFRA...

blog.naver.com

 

저작자표시 비영리

'언어 > PHP' 카테고리의 다른 글

CURL GET, POST 사용법  (0) 2024.08.22
html5를 이용한 파일 업로드 프로그레스바  (0) 2023.01.16
브라우저 언어 체크 및 리다이렉트  (0) 2022.10.04
PHPMailer에서 gmail api로 메일 발송하기(XOAUTH2 인증)  (0) 2022.06.09
Mac OS에서 파일 업로드시 한글파일명 모음자음 분리 현상  (0) 2022.03.18
'언어/PHP' Related Articles more
Comments