pdf.js实现加载整个pdf

最新推荐文章于 2024-09-21 20:59:09 发布

行者向阳

最新推荐文章于 2024-09-21 20:59:09 发布

阅读量2.3w

点赞数 3

分类专栏： Javascript 文章标签： pdf

本文链接：https://blog.csdn.net/y491887095/article/details/78222545

版权

Javascript 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

官网上给的demo只能加载指定页面的pdf，如果加载多个页面的pdf，就没有介绍了。

实现思路：

在pdf.js中一个canvas只能加载一页pdf。
那么根据页数动态生成与页面数匹配的canvas数量，然后将每页pdf分别插入到不同得到canvas中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pdfClass{
            border:1px solid black;
        }
    </style>
    <script src="pdf.js"></script>
</head>
<body>
<div class="wrapper" id="pdf-container">
</div>
</body>
<script>
    //程序只能在服务器上运行
    window.onload = function () {
        //创建
        function createPdfContainer(id,className) {
            var pdfContainer = document.getElementById('pdf-container');
            var canvasNew =document.createElement('canvas');
            canvasNew.id = id;
            canvasNew.className = className;
            pdfContainer.appendChild(canvasNew);
        };

        //渲染pdf
        //建议给定pdf宽度
        function renderPDF(pdf,i,id) {
            pdf.getPage(i).then(function(page) {

                var scale = 1.5;
                var viewport = page.getViewport(scale);

                //
                //  准备用于渲染的 canvas 元素
                //

                var canvas = document.getElementById(id);
                var context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;

                //
                // 将 PDF 页面渲染到 canvas 上下文中
                //
                var renderContext = {
                    canvasContext: context,
                    viewport: viewport
                };
                page.render(renderContext);
            });
        };
        //创建和pdf页数等同的canvas数
        function createSeriesCanvas(num,template) {
            var id = '';
            for(var j = 1; j <= num; j++){
                id = template + j;
                createPdfContainer(id,'pdfClass');
            }
        }
        //读取pdf文件，并加载到页面中
        function loadPDF(fileURL) {
            PDFJS.getDocument(fileURL).then(function(pdf) {
                //用 promise 获取页面
                var id = '';
                var idTemplate = 'cw-pdf-';
                var pageNum = pdf.numPages;
                //根据页码创建画布
                createSeriesCanvas(pageNum,idTemplate);
                //将pdf渲染到画布上去
                for (var i = 1; i <= pageNum; i++) {
                    id = idTemplate + i;
                    renderPDF(pdf,i,id);
                }

            });
        }
        //如果在本地运行，需要从服务器获取pdf文件
        loadPDF('http://www.cityworks.cn/baoan_water/234.pdf');
        //如果在服务端运行，需要再不跨域的情况下，获取pdf文件
        loadPDF('234.pdf');

    };

</script>
</html>