pdf.js 连续分页展示pdf内容

最新推荐文章于 2024-06-03 16:52:53 发布

只看远方

最新推荐文章于 2024-06-03 16:52:53 发布

阅读量1.5w

点赞数

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

本文链接：https://blog.csdn.net/niedewang/article/details/81277197

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

如何使用pdf.js 将所有内容在同一页中展示。本文将作出相应的展示，这类需求一般适用于手机，pad 等移动端。

前面博客中，演示的内容。都是点击下一页进行翻页。后面有网友问，如何在一页中展示出来，所以我把这块补充上。

其实呢，只要知道展示一页，如果要展示多个页，核心就是增加个循环，创建canvas 对象接受每一页的pdf文件绘制。其他的流程和每页显示一篇pdf，在流程上是一样的。

1:循环创建canvas 的代码

 var canvasList = document.getElementById('canvas_list');
 var canvas = document.createElement('canvas');
 canvasList.appendChild(canvas);
 canvasList.appendChild(document.createElement('hr'))

2: 循环绘制pdf 的核心代码

document.getElementById('page_count').textContent = '总页数:' + pdfDoc.numPages;
for(var $i =1 ; $i <= pdfDoc.numPages ; $i++) {
    // Initial/first page rendering
    renderPage($i);
}

3:注意事项：
本文只是展示，没有使用懒加载等性能优化手段，对体积较大的pdf，不太使用。

4:demo 下载地址
https://download.csdn.net/download/niedewang/10571405

5：完整html代码如下：

<html>
<head>
    <meta charset="utf-8">
    <title>pdf.js展示1，上一页，下一页</title>
</head>
<h1>PDF.js连续分页展示</h1>

<div>
    <span id="page_count"></span></span>
</div>

<div id="canvas_list">
    <canvas id="the-canvas"></canvas>
</div>


<script src="js/pdfjs/pdf.js"></script>
<script src="js/pdfjs/pdf.worker.js"></script>
<script>
    var url = '/pdf/demo1.pdf';

    var pdfDoc = null,
            pageNum = 1,
            pageRendering = false,
            pageNumPending = null,
            scale = 0.8;


    /**
     * Get page info from document, resize canvas accordingly, and render page.
     * @param num Page number.
     */
    function renderPage(num) {
        pageRendering = true;
        // Using promise to fetch the page
        pdfDoc.getPage(num).then(function(page) {
            var canvasList = document.getElementById('canvas_list');
            var canvas = document.createElement('canvas');
            canvasList.appendChild(canvas);
            canvasList.appendChild(document.createElement('hr'))

            var ctx = canvas.getContext('2d');
            var viewport = page.getViewport(scale);
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            // Render PDF page into canvas context
            var renderContext = {
                canvasContext: ctx,
                viewport: viewport
            };
            var renderTask = page.render(renderContext);

            // Wait for rendering to finish
            renderTask.promise.then(function() {
                pageRendering = false;
                if (pageNumPending !== null) {
                    // New page rendering is pending
                    renderPage(pageNumPending);
                    pageNumPending = null;
                }
            });
        });

    }

    /**
     * If another page rendering in progress, waits until the rendering is
     * finised. Otherwise, executes rendering immediately.
     */
    function queueRenderPage(num) {
        if (pageRendering) {
            pageNumPending = num;
        } else {
            renderPage(num);
        }
    }


    /**
     * Asynchronously downloads PDF.
     */
    PDFJS.getDocument(url).then(function(pdfDoc_) {
        pdfDoc = pdfDoc_;
        document.getElementById('page_count').textContent = '总页数:' + pdfDoc.numPages;
        for(var $i =1 ; $i <= pdfDoc.numPages ; $i++) {
            // Initial/first page rendering
            renderPage($i);
        }

    });
</script>
</html>

只看远方

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
pdf.js 连续分页展示pdf内容

如何使用pdf.js 将所有内容在同一页中展示。本文将作出相应的展示，这类需求一般适用于手机，pad 等移动端。前面博客中，演示的内容。都是点击下一页进行翻页。后面有网友问，如何在一页中展示出来，所以我把这块补充上。其实呢，只要知道展示一页，如果要展示多个页，核心就是增加个循环，创建canvas 对象接受每一页的pdf文件绘制。其他的流程和每页显示一篇pdf，在流程上是一样的。 1:循环...
复制链接

扫一扫