pdf.js的使用（分页）以及关闭（web端在线显示文档pdf）

版权声明：版权来自tjeneifer https://blog.csdn.net/asdfghjkl110292/article/details/88844237

首先贴图：
大概是这样的，可以动态设置打开的路径

首先是html界面：

 <h1><a href="javascript:void(0)" target="_blank" onclick="showPdf()">显示pdf文档</a></h1>
    <div id="container" style="display: none;">
        <div class="lightbox"></div>
        <div id="pop" class="pop">
            <div>
                <button id="prev">上一页</button>
                <button id="next">下一页</button>
                <button id="close" onclick="close()">关闭</button>
                <span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
            </div>
            <canvas id="the-canvas"></canvas>
        </div>
        
    </div>

然后是css,可以放到和html同一面

    <style type="text/css" >
         .lightbox {
        position: fixed;
        top: 0px;
        left: 0px;
        height: 100%;
        width: 100%;
        z-index: 7;
        opacity: 0.3;
        display: block;
        background-color: rgb(0, 0, 0);
    }

    .pop {
        position: absolute;
        left: 30%;
        width: 894px;
        margin-left: -447px;
        z-index: 9;
    }

    </style >

然后是js:(先贴部分),还差在document绑定事件

var pageindex = 1;  //当前页
var maxindex;  //总页数
var view;
//单页pdf.js
function showPdf(nowpage) {
    console.log(nowpage);
    if (nowpage == "" || nowpage == null)
        nowpage = pageindex;
        var container = document.getElementById("container");
        container.style.display = "block";
        var url = '/Scripts/dd.pdf';
        PDFJS.workerSrc = '/Scripts/pdf/pdf.worker.js';
        PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
            pdf.getPage(nowpage).then(function getPageHelloWorld(page) {
                var scale = 2;
                var viewport = page.getViewport(scale);
                view = viewport;   //存放，清空的时候用
                var canvas = document.getElementById('the-canvas');
                var context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;
                document.getElementById('page_num').textContent = nowpage;//当前页数
                maxindex = pdf.numPages;//总页数
               // console.log(pdf.numPages);
               // console.log(canvas);
                var renderContext = {
                    canvasContext: context,
                    viewport: viewport
                };
                console.log(page);
                page.render(renderContext);
            });
        });
    }
//上一页
  
    //上一页
    function onPrevPage() {
        if (pageindex <= 1) {
            return;
        }
        showPdf(--pageindex);
        
    }

    //下一页
    function onNextPage() {
        if (pageindex >= maxindex) {
            return;
        }
        
        showPdf(++pageindex);
    }

这是另外一部分：（在同一个js）绑定事件以及那些得再这里写

$(document).ready(function () {
    document.getElementById('prev').addEventListener('click', onPrevPage);   //按钮绑定事件得再这里面哦
    document.getElementById('next').addEventListener('click', onNextPage);  //对应html里的id和js定义的事件
    

    $("#close").click(function () {   //这个是清空画布然后再让它隐藏
        var cxt = document.getElementById("the-canvas").getContext("2d");
        cxt.clearRect(0, 0, view.width, view.height);
        $("#container").hide();
    })
 
});

然后下面这个是pdf.js的压缩包

链接：https://pan.baidu.com/s/1XiRhkl3iJpYmeIUdrOJRBA
提取码：2w3h