PDF 预览

最新推荐文章于 2023-11-09 18:17:18 发布

骑乌龟赛跑

最新推荐文章于 2023-11-09 18:17:18 发布

阅读量610

点赞数 1

本文链接：https://blog.csdn.net/qq_37261367/article/details/81382756

版权

随笔专栏收录该内容

16 篇文章 0 订阅

订阅专栏

PDF 预览

最近写了个pdf文件预览，很多插件，最终选了pdf.js，简单。下面是一个极其简单的demo

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>Document</title>
    <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: 50%;
            width: 894px;
            margin-left: -447px;
            z-index: 9;
        }

        .pageBox {
            position: absolute;
            left: 20%;
            z-index: 10;
            color: red;
        }
    </style>

</head>
<body>
<button onclick="pdfView.importPDF('./public/Lorem.pdf')">来啊，点我啊,点我直接展示</button>

<div class="pageBox">
    <button class="" id="prev" onclick="pdfView.toPrevPage()">上一页</button>
    <button class="" id="next" onclick="pdfView.toNextPage()">下一页</button>
</div>
<div class="page_count" id="page_count"></div>


<div id="container" style="display: none;">
    <div class="lightbox"></div>
    <div id="pop" class="pop">
        <canvas id="the-canvas"></canvas>
    </div>
</div>

</body>
<script src="./public/pdf.js"></script>
<script type="text/javascript">


    class PDFView{
        constructor(num){
            this.pageNum = num;
            this.workUrl = './public/pdf.worker.min.js';
            this.PDFobj = null;
        }
        chooseFile(me){
            let vm = this;
            console.log(me.files);
            console.log(me.value);
            vm.importPDF(me.value);
        }
        importPDF(pdfUrl){
            let vm = this;
            let container = document.getElementById("container");
            container.style.display = "block";
            let url = pdfUrl;
            PDFJS.workerSrc = vm.workUrl;
            PDFJS.getDocument(url).promise.then((pdf) => {
                vm.pageTatol = pdf.numPages;
                document.getElementById('page_count').textContent = pdf.numPages;
                vm.PDFobj = pdf;
                vm.showPDF();
            }).catch((err) => {
                console.log(err);
            })
        }
        showPDF(){
            let vm = this;
            vm.PDFobj.getPage(vm.pageNum).then((page) => {
                let scale = 1.5;
                let viewport = page.getViewport(scale);

                let canvas = document.getElementById('the-canvas');
                let context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;

                let renderContext = {
                    canvasContext: context,
                    viewport: viewport
                };
                page.render(renderContext);
            });
        }
        toPrevPage(){
            let vm = this;
            if (vm.pageNum <= 1) {
                alert('不要再点了，已经是第一夜了��');
                return;
            }
            vm.pageNum--;
            vm.showPDF();
        }
        toNextPage(){
            let vm = this;
            if (vm.pageNum >= vm.pageTatol) {
                alert('不要再点了，已经是最后一夜了��');
                return;
            }
            vm.pageNum++;
            vm.showPDF();
        }
    }
    var url = './public/lalala.pdf';

    /*
    *   引用方式
    *   var pdfView = new PDFView(1,url,workerSrc);
    *   @{param,param}   初始页，pdf文件路径
    *
    *   pdfView.importPDF()   加载pdf并展示
    *
    *   pdfView.toPrevPage()  上一页
    *   pdfView.toNextPage()  下一页
    *
    * */
    var pdfView = new PDFView(1);


</script>
</html>

源码包在这里 https://download.csdn.net/download/qq_37261367/10560372

本文纯手打，有不当之处请留言！如果对小伙伴们有帮助的话,点赞啊,谢谢!

骑乌龟赛跑

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
PDF 预览

PDF 预览最近写了个pdf文件预览，很多插件，最终选了pdf.js，简单。下面是一个极其简单的demo&lt;html&gt;&lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt; &lt;title&gt;Document&lt;/title&amp
复制链接

扫一扫