工作笔记三——使用pdf.js实现pdf文件的在线预览

最新推荐文章于 2024-03-25 14:51:16 发布

袁杰Jerry

最新推荐文章于 2024-03-25 14:51:16 发布

阅读量5k

点赞数 1

分类专栏：前端文章标签： javascript pdf.js

本文链接：https://blog.csdn.net/qq_25324335/article/details/78991496

版权

前端专栏收录该内容

36 篇文章 2 订阅

订阅专栏

博客更新地址啦～，欢迎访问：https://jerryyuanj.github.io/

最近做移动项目（H5）时遇到一个需求，就是在线预览pdf文件。其实本来使用window.open()就可以实现了，但是这个API在IOS上是正常的打开Safari浏览器进行预览，在安卓上打开是则是下载预览，客户不满意；而且在将该应用嵌入到钉钉微应用时，这个API在安卓设备上根本不起效果。于是在网上找到了这个插件，去官网摘了个例子，并且结合移动端的上下左右滑动滑动翻页做了个例子，完美解决。以下是详细代码。注释都在代码中。

<html>
<head>
    <meta charset="UTF-8">
    <title>pdf在线预览</title>
    <script src="js/pdf.js" type="text/javascript"></script>
    <style>
        button {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: lightseagreen;
            border: 1px solid transparent;
            border-radius: 5px;
            height: 30px;
            width: 70px;
        }

        .header-bar {
            background-color: cornflowerblue;
            height: 5%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 2em;
        }

        .pdf-container {
            background-color: gainsboro;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 95%
        }
        canvas{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div class="header-bar">
    <span>当前第 <span id="page_num"></span> 页    共<span id="page_count"></span>页</span>
</div>
<div class="pdf-container">
    <canvas id="the-canvas"></canvas>
</div>

</body>
<script type="text/javascript">
    var url = 'test-js.pdf';

    //  workerSrc的路径
    PDFJS.workerSrc = 'js/pdf.worker.js';

    var pdfDoc = null,
        pageNum = 1,
        pageRendering = false,
        pageNumPending = null,
        scale = 1,设置pdf文本显示区域的缩放级别
        canvas = document.getElementById('the-canvas'),
        ctx = canvas.getContext('2d');

    /**
     * 渲染对应的文档页码，并且调整canvas大小，渲染界面
     * @param num 页码.
     */
    function renderPage(num) {
        pageRendering = true;
        // 通过promise来获取
        pdfDoc.getPage(num).then(function (page) {

            var viewport = page.getViewport(scale);
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            //将PDF文件渲染进canvas中
            var renderContext = {
                canvasContext: ctx,
                viewport: viewport
            };
            var renderTask = page.render(renderContext);

            //等待渲染结束
            renderTask.promise.then(function () {
                pageRendering = false;
                if (pageNumPending !== null) {
                    // New page rendering is pending
                    renderPage(pageNumPending);
                    pageNumPending = null;
                }
            });
        });

        // 更新页码
        document.getElementById('page_num').textContent = num;
    }

    /**
     * 如果有另一个页面pdf页正在渲染，那么先等这个pdf页渲染完再渲染。否则立即渲染传进来的页码。
     */
    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);
    }

    /**
     * 异步的下载pdf文件
     */
    PDFJS.getDocument(url).then(function (pdfDoc_) {
        pdfDoc = pdfDoc_;
        document.getElementById('page_count').textContent = pdfDoc.numPages;

        // 下载完以后初始化渲染第一页
        renderPage(pageNum);
    });

    function _touch() {
        var startx;//让startx在touch事件函数里是全局性变量。
        var endx;
        var el = document.getElementsByTagName("body")[0];

        function cons() {   //独立封装这个事件可以保证执行顺序，从而能够访问得到应该访问的数据。
            var l = Math.abs(startx - endx);
            var h = Math.abs(starty - endy);

            if (l > h) {
                // x事件
                if (startx > endx) {
                    onNextPage();
                } else if (startx < endx) {
                    onPrevPage();
                }

            } else {
                // y事件
                if (starty > endy) {
                    onNextPage();
                } else if (starty < endy) {
                    onPrevPage();
                }
            }

        }

        el.addEventListener('touchstart', function (e) {
            var touch = e.changedTouches;
            startx = touch[0].clientX;
            starty = touch[0].clientY;
        });
        el.addEventListener('touchend', function (e) {
            var touch = e.changedTouches;
            endx = touch[0].clientX;
            endy = touch[0].clientY;
            cons();  //startx endx 的数据收集应该放在touchend事件后执行，而不是放在touchstart事件里执行，这样才能访问到touchstart和touchend这2个事件产生的startx和endx数据。另外startx和endx在_touch事件函数里是全局性的，所以在此函数中都可以访问得到，所以只需要注意事件执行的先后顺序即可。
        });
    }

    _touch();
</script>
</html>

demo演示效果：

demo地址：

github: https://github.com/JerryYuanJ/demos/tree/master/01-pdf-online-viewer

csdn：http://download.csdn.net/download/qq_25324335/10192172

github上版本的对结构做了一点修改。欢迎star。

袁杰Jerry

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
3
评论
工作笔记三——使用pdf.js实现pdf文件的在线预览

最近做移动项目（H5）时遇到一个需求，就是在线预览pdf文件。其实本来使用window.open()就可以实现了，但是这个API在IOS上是正常的打开Safari浏览器进行预览，在安卓上打开是则是下载预览，客户不满意；而且在将该应用嵌入到钉钉微应用时，这个API在安卓设备上根本不起效果。于是在网上找到了这个插件，去官网摘了个例子，并且结合移动端的上下左右滑动滑动翻页做了个例子，完美解决。以下是详细...
复制链接

扫一扫