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

最新推荐文章于 2024-04-10 16:24:47 发布

风神.NET

最新推荐文章于 2024-04-10 16:24:47 发布

阅读量2k

点赞数

分类专栏： Html+Javascript

原文链接：https://blog.csdn.net/WuLex

版权

Html+Javascript 专栏收录该内容

258 篇文章 12 订阅

订阅专栏

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);

如图:

在这里插入图片描述

下载示例

风神.NET

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
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/
复制链接

扫一扫