jQuery+pdf.js 实现的PDF切换预览

快来打我* 2021-07-04 17:40 462阅读 0赞

## index.html ##

需要部署在web服务器上打开

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="content/css/reset.css">
        <link rel="stylesheet" href="content/css/site.css">
    </head>
    <body>
    <div class="container">
        <div class="read-ppt">
            <div class="ppt-view">
                <canvas id="canvas"></canvas>
                <div class="loading"></div>
            </div>
            <span class="next"></span>
            <span class="prev"></span>
        </div>
        <div class="ppt-pager" style="display: block;">
            <span class="current-page">1</span>
            <span>/</span>
            <span class="total-page">47</span>
        </div>
    </div>
    
    <script src="scripts/lib/jquery.min.js"></script>
    <script src="scripts/lib/pdf.js"></script>
    <script src="scripts/lib/pdf.worker.js"></script>
    
    <script src="scripts/sites/readPPT.js"></script>
    </body>
    
    </html>

## reset.css ##

html {  color: #000; }
    
    body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, select, p, blockquote, th, td { 
        margin: 0;
        padding: 0
    }
    
    table { 
        border-collapse: collapse;
        border-spacing: 0
    }
    
    fieldset, img {  border: 0 }
    
    address, button, caption, cite, code, dfn, em, input, optgroup, option, select, strong, textarea, th, var {  font: inherit }
    
    del, ins {  text-decoration: none }
    
    li { 
        list-style: none;
        list-style-image: none;
    }
    
    caption, th {  text-align: left }
    
    h1, h2, h3, h4, h5, h6 { 
        font-size: 100%;
        font-weight: normal
    }
    
    q:before, q:after {  content: '' }
    
    abbr, acronym { 
        border: 0;
        font-variant: normal
    }
    
    sup {  vertical-align: super }
    
    sub {  vertical-align: baseline }
    
    legend {  color: #000 }
    
    em {  font-style: italic; }
    
    strong {  font-weight: bold; }
    
    p {  line-height: 18px; }
    
    body {  font: 13px/1.231 arial, helvetica, clean, sans-serif; }

## site.css ##

.container { 
        width: 100%;
        max-width: 1140px;
        margin: 0 auto;
        margin-top: 50px;
    }
    
    .read-ppt { 
        position: relative;
        width: 85%;
        margin: auto;
        height: 0;
        text-align: center;
        border: 1px solid #d1d6da;
        margin-bottom: 15px;
    }
    
    .loading { 
        position: absolute;
        display: none;
        left: 50%;
        top: 50%;
        margin-top: -25px;
        margin-left: -25px;
        width: 50px;
        height: 50px;
        background: url("../images/loading.gif") no-repeat;
    }
    
    .read-ppt span { 
        background: url("../images/video_slider_arrow.png") no-repeat;
        position: absolute;
        left: 0;
        top: 50%;
        display: block;
        margin: -40px 0 0 -50px;
        width: 35px;
        height: 50px;
        text-indent: -9999px;
    }
    
    .read-ppt span:hover {  cursor: pointer; }
    
    .read-ppt .next { 
        left: 100%;
        margin-left: 15px;
        background-position: -37px;
    }
    
    .ppt-pager { 
        display: none;
        text-align: center;
        margin-bottom: 35px;
        font-family: "Malgun Gothic";
        font-size: 20px;
    }
    
    .ppt-pager .current-page { 
        font-size: 24px;
        color: #0096d5;
    }
    
    .ppt-pager .total-page {  color: #555555; }

## readPPT.js ##

/** */
    (function($) { 
        $(function() { 
            var url = "resources/1.pdf";
    
            var pdfDoc = null,
                pageNum = 1,
                pageRendering = false,
                pageNumPending = null,
                scale = 1,
                canvas = document.getElementById("canvas"),
                ctx,
                $currentPageEle = $(".ppt-pager .current-page"),
                $totalPageEle = $(".ppt-pager .total-page"),
                $readPPT = $(".read-ppt"),
                resizeTimeout,
                isFirstRender = true;
            var $loadingEle = $(".loading");
            if (canvas) { 
                ctx = canvas.getContext('2d');
            }
    
            function renderPage(num) { 
                if (!isFirstRender) { 
                    $loadingEle.show();
                }
                pageRendering = true;
                pdfDoc.getPage(num).then(function(page) { 
                    var desireWidth = $readPPT.width() - 5,
                        viewport = page.getViewport(scale),
                        desireScale = desireWidth / viewport.width,
                        scaleViewPort = page.getViewport(desireScale);
                    canvas.height = scaleViewPort.height;
                    canvas.width = scaleViewPort.width;
                    $readPPT.css("padding-bottom", canvas.height / canvas.width * $readPPT.width());
                    var renderContext = { 
                        canvasContext: ctx,
                        viewport: scaleViewPort
                    };
                    var renderTask = page.render(renderContext);
                    renderTask.promise.then(function() { 
                        pageRendering = false;
                        $(".ppt-pager").show();
                        $loadingEle.hide();
                        if (pageNumPending !== null) { 
                            renderPage(pageNumPending);
                            pageNumPending = null;
                        }
                    });
                });
                $currentPageEle.text(pageNum);
            }
    
            function queueRenderPage(num) { 
                if (pageRendering) { 
                    pageNumPending = num;
                } else { 
                    renderPage(num);
                }
            }
    
            function onPrevPage() { 
                if (pageNum <= 1) { 
                    return;
                }
                pageNum--;
                queueRenderPage(pageNum);
            }
    
            function onNextPage() { 
                if (pageNum >= pdfDoc.numPages) { 
                    return;
                }
                pageNum++;
                queueRenderPage(pageNum);
            }
    
            if ($(".read-ppt canvas").length > 0) { 
                $loadingEle.show();
                PDFJS.getDocument(url).then(function(pdfDoc_) { 
                        pdfDoc = pdfDoc_;
                        $totalPageEle.text(pdfDoc.numPages);
                        renderPage(pageNum);
                        $('.read-ppt .prev').on('click', onPrevPage);
                        $('.read-ppt .next').on('click', onNextPage);
                        isFirstRender = false;
                    },
                    function error(e) { 
                        alert(e.message);
                        $loadingEle.hide();
                    });
                window.onresize = function() { 
                    if (pdfDoc) { 
                        clearTimeout(resizeTimeout);
                        resizeTimeout = setTimeout(function() { 
                                renderPage(pageNum);
                            },
                            200);
                    }
                }
            }
        });
    })(jQuery);

## 如图: ##

![在这里插入图片描述][20200720171358937.png]

![在这里插入图片描述][20200720171408865.png]

[下载示例][Link 1]

[20200720171358937.png]: /images/20210704/63838df4451f4b69a2ee298d5b1b49b8.png
[20200720171408865.png]: /images/20210704/370ca45879f44e46a6609385fc6447c5.png
[Link 1]: https://download.csdn.net/download/WuLex/12643310