jQuery+pdf.js 实现的PDF切换预览-蒲公英云

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/lib/compatibility.js"></script> <script src="scripts/lib/pdf.combined.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);