<head> <meta charset="UTF-8"> <meta http-equ"/>

pdf.js pdf 网页查看,翻页教程

html代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>pdf VIEWER</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css">
</head>

<body>
    <div class="top-bar">
        <button id="prev-page" class="btn"><i class="fas fa-arrow-circle-left"></i>Prev Page</button>
        <button id="next-page" class="btn">Next Page<i class="fas fa-arrow-circle-right"></i></button>
        <span class="page-info">Page <span id="page-num"></span> of <span id="page-count"></span></span>
    </div>
    <canvas id="pdf-render"></canvas>


</body>
<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
<script src="js/main.js"></script>

</html>

CSS代码:

* {
    margin: 0;
    padding: 0;
}

canvas {
    width: 100%;
}

.top-bar {
    background-color: #333;
    color: #fff;
    padding: 1rem;
}

.btn {
    background: coral;
    color: #fff;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 0.7rem 2rem;
}

.btn:hover {
    opacity: 0.9;
}

.page-info {
    margin-left: 1rem;

}

.error {
    background-color: orangered;
    color: #fff;
    padding: 1rem;
}

JS代码

const url = '../bronch.pdf';

let pdfDoc = null,
    pageNum = 1,
    pageIsRendering = false,
    pageNumIsPending = null;

const scale = 1.5,
    canvas = document.querySelector('#pdf-render'),
    ctx = canvas.getContext('2d');

//render the page 
const renderPage = num => {
    pageIsRendering = true;

    //get page 
    pdfDoc.getPage(num).then(page => {
        //set scale 
        const viewport = page.getViewport({ scale });
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        const renderCtx = {
            canvasContext: ctx,
            viewport
        }

        page.render(renderCtx).promise.then(() => {
            pageIsRendering = false;

            if (pageNumIsPending !== null) {

                renderPage(pageNumIsPending);
                pageNumIsPending = null;

            }

        });

        //output current page 
        document.querySelector('#page-num').textContent = num;
        console.log(page);
    });
}

//check for pages rendering
const queueRenderPage = num => {
    if (pageIsRendering) {
        pageNumIsPending = num;
    } else {
        renderPage(num);
    }
}

//show prev page 
const showPrevPage = () => {
    if (pageNum <= 1) {
        return;

    }
    pageNum--;
    queueRenderPage(pageNum);

};

//show next page 
const showNextPage = () => {
    if (pageNum >= pdfDoc.numPages) {
        return;
    }
    pageNum++;
    queueRenderPage(pageNum);

};

//Get Document 
//因为之前设置了全局的pdfDoc , 这里传递的pdfDoc_ 是从js获取的对象,所以要把这个对象赋值到全部的pdfDoc变量
pdfjsLib.getDocument(url).promise.then(pdfDoc_ => {
    pdfDoc = pdfDoc_;

    document.querySelector('#page-count').textContent = pdfDoc.numPages;

    renderPage(pageNum);
    console.log(pdfDoc);
}).catch(err => {
    //display error 
    const div = document.createElement('div');
    div.className = 'error';
    div.appendChild(document.createTextNode(err.message));
    document.querySelector('body').insertBefore(div, canvas);
    //remove top bar 
    document.querySelector('.top-bar').style.display = 'none';

});

//prev and next button event listener 
document.querySelector('#prev-page').addEventListener('click', showPrevPage);
document.querySelector('#next-page').addEventListener('click', showNextPage);

Check Also

获取input的keyup或者input状态只获取一次值避免无限重复值

$(document).rea …

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注