웹상에서 PDF 뷰어 소스 (copyright 2021 Mozilla)

by 조쉬 posted Apr 09, 2024
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

가 크게 작게 위로 아래로 댓글로 가기 인쇄 
<!DOCTYPE html>
<html>
<head>
    <title>PDF Viewer</title>
    <style>
        #pdf-container {
            width: 100%;
            height: 100%; /* 크기를 조정할 수 있습니다. */
        }
    </style>
</head>
<body>
    <div id="pdf-container"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
    <script>
        // PDF 파일 경로
        const pdfUrl = 'PDF파일위치경로';
        // PDF.js로 PDF 파일 불러오기
        pdfjsLib.getDocument(pdfUrl).promise.then(function(pdf) {
            // 첫 번째 페이지 가져오기
            pdf.getPage(1).then(function(page) {
                // 캔버스 생성
                const canvas = document.createElement('canvas');
                const canvasContext = canvas.getContext('2d');
                // 페이지 크기 설정
                const viewport = page.getViewport({ scale: 1.0 });
                canvas.width = viewport.width;
                canvas.height = viewport.height;
                // 페이지를 캔버스에 그리기
                const renderContext = {
                    canvasContext,
                    viewport
                };
                page.render(renderContext).promise.then(function() {
                    // 캔버스를 HTML에 추가
                    const pdfContainer = document.getElementById('pdf-container');
                    pdfContainer.appendChild(canvas);
                });
            });
        });
    </script>
</body>
</html>

 

3731943363_1688015087.7456.png

 

 

 

이미지 버턴 클릭하면 나오게 하기

3731943363_1688019813.7268.png

<!DOCTYPE html>
<html>
<head>
    <title>PDF Viewer</title>
    <style>
        body, html {
            height: 100%;
            margin: 0;
            overflow: hidden;
        }
        #pdf-container {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        #pdf-canvas {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    </style>
</head>
<body>
    <button id="file1-btn">File 1</button>
    <button id="file2-btn">File 2</button>
    <button id="file3-btn">File 3</button>
    <div id="pdf-container">
        <canvas id="pdf-canvas"></canvas>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
    <script>
        function openPDF(pdfUrl) {
            // PDF.js로 PDF 파일 불러오기
            pdfjsLib.getDocument(pdfUrl).promise.then(function(pdf) {
                // 첫 번째 페이지 가져오기
                pdf.getPage(1).then(function(page) {
                    // 캔버스 생성
                    const canvas = document.getElementById('pdf-canvas');
                    const canvasContext = canvas.getContext('2d');
                    // 페이지 크기 설정
                    const viewport = page.getViewport({ scale: 1.0 });
                    const scale = Math.min(canvas.width / viewport.width, canvas.height / viewport.height);
                    const scaledViewport = page.getViewport({ scale });
                    // 캔버스 크기 조정
                    canvas.width = canvas.offsetWidth;
                    canvas.height = canvas.offsetHeight;
                    // 페이지를 캔버스에 그리기
                    const renderContext = {
                        canvasContext,
                        viewport: scaledViewport
                    };
                    page.render(renderContext).promise.then(function() {
                        // PDF 컨테이너 표시
                        const pdfContainer = document.getElementById('pdf-container');
                        pdfContainer.style.display = 'flex';
                    });
                });
            });
        }
        // 파일 클릭 시 해당 PDF 열기
        const file1Url = 'https://naver.com/pdf/1.pdf'; // 이미지 위치
        const file2Url = 'https://naver.com/pdf/2.pdf'; // 이미지 위치
        const file3Url = 'https://naver.com/pdf/3.pdf'; // 이미지 위치
        const file1Btn = document.getElementById('file1-btn');
        file1Btn.addEventListener('click', function() {
            openPDF(file1Url);
        });
        const file2Btn = document.getElementById('file2-btn');
        file2Btn.addEventListener('click', function() {
            openPDF(file2Url);
        });
        const file3Btn = document.getElementById('file3-btn');
        file3Btn.addEventListener('click', function() {
            openPDF(file3Url);
        });
    </script>
</body>
</html>

 

입력방식으로 변경할려면

sir.kr/pdf/index.php?a=../../1.pdf  값으로 

 

index.php 저장 경우

<!DOCTYPE html>
<html>
<head>
    <title>PDF Viewer</title>
    <style>
        body, html {
            height: 100%;
            margin: 0;
            overflow: hidden;
        }
        #pdf-container {
            width: 100%;
            height: 100%;
            overflow: auto;
        }
        
        #pdf-canvas {
            display: block;
            margin: 0 auto;
            max-width: 100%;
            object-fit: contain;
        }
    </style>
</head>
<body>
    <div id="pdf-container"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
    <script>
        // URL에서 PDF 파일 경로 가져오기
        const urlParams = new URLSearchParams(window.location.search);
        const pdfUrl = urlParams.get('a');
        function openPDF(pdfUrl) {
            // PDF.js로 PDF 파일 불러오기
            pdfjsLib.getDocument(pdfUrl).promise.then(function(pdf) {
                const pdfContainer = document.getElementById('pdf-container');
                
                // 각 페이지를 순회하며 캔버스를 생성하고 추가
                for (let pageNumber = 1; pageNumber <= pdf.numPages; pageNumber++) {
                    pdf.getPage(pageNumber).then(function(page) {
                        // 캔버스 생성
                        const canvas = document.createElement('canvas');
                        const canvasContext = canvas.getContext('2d');
                        // 페이지 크기 설정
                        const viewport = page.getViewport({ scale: 1.0 });
                        const scale = Math.min(pdfContainer.offsetWidth / viewport.width, pdfContainer.offsetHeight / viewport.height);
                        // 캔버스 크기 조정
                        canvas.width = viewport.width * scale;
                        canvas.height = viewport.height * scale;
                        // 페이지를 캔버스에 그리기
                        const renderContext = {
                            canvasContext,
                            viewport: page.getViewport({ scale })
                        };
                        page.render(renderContext).promise.then(function() {
                            // 캔버스를 PDF 컨테이너에 추가
                            pdfContainer.appendChild(canvas);
                        });
                    });
                }
            });
        }
        if (pdfUrl) {
            openPDF(pdfUrl);
        }
    </script>
</body>
</html>
 
 
위로 아래로 댓글로 가기 인쇄