pdfjs 基础使用教程（三）上

最新推荐文章于 2024-04-13 14:06:32 发布

WellStar520

最新推荐文章于 2024-04-13 14:06:32 发布

阅读量2.3k

点赞数 1

分类专栏： pdf.js 文章标签： html5 html css

本文链接：https://blog.csdn.net/e78com5959ws77/article/details/120581503

版权

pdf.js 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

第三个基础教程主要讲分页上半部分讲自定义分页

随着我们pdfjs的学习我们已经学会了pdfjs展示自己的pdf文件，那么如果一个pdf文件非常大的话怎么办，比如1百乃至几百m。因为pdfjs默认是全部pdf一次渲染。那么非常大的pdf会导致本地下载时间非常长，本地渲染时间非常长，用户长时间处于空白页面，造成非常差的用户体验。那么我们解决的方法就是分页。

分页基础理论就是用户进入页面我们可以先返回1～2页数据，顺便渲染1～2页数据，那么用户就能看到页面，其他的页面呢，一种是可以后台慢慢渲染，还有一种就是用户请求到那一页我们给他渲染到那一页。

我们pdfjs的理论是什么，我们创建和pdf页面数相等的canvas数目，然后渲染pdf第一页，因为pdf文件有可能很大所以我们最好后端单页pdf流或者单页base64返回，然后呢当用户向下滚动的时候当滚动到一定距离的时候（或者其他方式我自己写的一种方式）我这里面写了个大概像html 两个div之间的padding 后端返回单个页并没有涉及，只是前端描述了一下思想，代码如下

<!DOCTYPE html>
<html>
    <head>
        <title>自定义渲染pdf页demo</title>
    </head>
    <body>
        <div>
            <canvas width="612" height="792" class="canvas"></canvas>
        </div>
        <div>
            <canvas width="612" height="792" class="canvas"></canvas>
        </div>
        <div>
            <canvas width="612" height="792" class="canvas"></canvas>
        </div>

        <script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
        <script>
            //html页面滚动方法
            var scrollFunc = function (e) { 
                e = e || window.event; 
                if (e.wheelDelta) { //第一步：先判断浏览器IE，谷歌滑轮事件    
                if (e.wheelDelta > 0) { //当滑轮向上滚动时 
                console.log("滑轮向上滚动"); 
                } 
                if (e.wheelDelta < 0) { //当滑轮向下滚动时 
                    // 592是一页792的多半，意思就是当前一页滚动多半的时候渲染下一页面，
                    if(window.scrollY >= 592){
                        rend(2, document.getElementsByClassName('canvas').item(1))
                    }
                    if(window.scrollY >= 592 * 2){
                        rend(3, document.getElementsByClassName('canvas').item(2))
                    }
                    console.info(window.scrollY);

                } 
                } else if (e.detail) { //Firefox滑轮事件 
                if (e.detail> 0) { //当滑轮向上滚动时 
                console.log("滑轮向上滚动"); 
                } 
                if (e.detail< 0) { //当滑轮向下滚动时 
                    console.info(window.scrollY);
                } 
                } 
            }
            window.onmousewheel = document.onmousewheel = scrollFunc;


            var pdfjsLib = window['pdfjs-dist/build/pdf'];

            var pdfurl = 'https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf';
            var pdfData = atob(
                'JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog' +
                'IC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAv' +
                'TWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0K' +
                'Pj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAg' +
                'L1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+' +
                'PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9u' +
                'dAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2Jq' +
                'Cgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJU' +
                'CjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVu' +
                'ZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4g' +
                'CjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAw' +
                'MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v' +
                'dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G');
            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';
            
            //异步下载pdf 加载base64pdf
            // var loadingTask = pdfjsLib.getDocument({data: pdfData});

            // 异步下载pdf加载pdfurl
            var loadingTask = pdfjsLib.getDocument(pdfurl);

            function rend(pageNumber, canvas){
                //加载pdf
                loadingTask.promise.then(function(pdf) {
                                console.log('PDF loaded');
                
                                
                                //这里面来调用getPage方法获取对应的页面
                                pdf.getPage(pageNumber).then(function(page) {
                                    //这个是倍数
                                    var scale = 1;
                                    //这个是展示的倍数viewer.html的倍数就是改的这个东西
                                    var viewport = page.getViewport({scale: scale});
                                    
                                    //这里面获得一个画笔
                                    var context = canvas.getContext('2d');
                                    //这里面定义canvas的宽高
                                    canvas.height = viewport.height;
                                    canvas.width = viewport.width;

                                    
                                    var renderContext = {
                                    canvasContext: context,
                                    viewport: viewport
                                    };
                                    //真正的渲染
                                    var renderTask = page.render(renderContext);
                                    renderTask.promise.then(function () {
                                        console.log('渲染完毕');
                                    });
                                });
                            }, function(reason){
                                //pdf加载错误 原因有很多 比如文件错误这种的话属于不可解决问题  比如pdf有密码 这种就可以在这里处理
                                console.log('loading error')
                                //pdfjs 自己编辑的错误码        
                                console.error(reason);
                            })
            }
            //渲染第一页
            rend(1, document.getElementsByClassName('canvas').item(0))
        </script>
    </body>
</html>

如果后面需要的话我做一个简版的前后端结合的

利用viewer.html做分页将在使用教程（三）下讲述

基础交流群 799827663

WellStar520

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
pdfjs 基础使用教程（三）上

第三个基础教程主要讲分页上半部分讲自定义分页随着我们pdfjs的学习我们已经学会了pdfjs展示自己的pdf文件，那么如果一个pdf文件非常大的话怎么办，比如1百乃至几百m。因为pdfjs默认是全部pdf一次渲染那么非常大的pdf会导致本地下载时间非常，本地渲染时间非常长，用户长时间处于空白页面，造成非常差的用户体验。那么我们解决的方法就是分页。分页基础理论就是用户进入页面我们可以先返回1～2页数据，顺便渲染1～2页数据，那么用户就能看到页面，其他的页面呢，一种...
复制链接

扫一扫