pdf.js在线PDF浏览插件的使用

pdf.js这个插件可以实现在浏览器阅读PDF文件，技术原型主要用于在 HTML5 平台上展示 PDF 文档，无需任何本地技术支持。
Mozilla Firefox的pdf预览也是集成了这个插件。

官网
https://mozilla.github.io/pdf.js/

pdf.js主要包含两个库文件，一个pdf.js和一个pdf.worker.js一个负责API解析，一个负责核心解析。
单页PDF使用示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="build/pdf.js"></script>    // 导入pdf.js
        <script>
            function showPdf() {

                PDFJS.workerSrc = 'build/pdf.worker.js'; //加载核心库
                PDFJS.getDocument("web/09.pdf").then(function getPdfHelloWorld(pdf) {
                    //
                    // 获取第一页数据
                    //
                    pdf.getPage(1).then(function getPageHelloWorld(page) {
                        var scale = 1.5;
                        var viewport = page.getViewport(scale);

                        //
                        // Prepare canvas using PDF page dimensions
                        //
                        var canvas = document.getElementById('the-canvas');
                        var context = canvas.getContext('2d');
                        canvas.height = viewport.height;
                        canvas.width = viewport.width;

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

            }
        </script>
    </head>

    <body>
        <a href="javascript:void(0)" target="_blank" onclick="showPdf()">显示pdf文档</a>

        <canvas id="the-canvas"></canvas>
    </body>

</html>

插件结构：

直接在viewer.js修改pdf的链接即可

频道导航

pdf.js在线PDF浏览插件的使用

您可能感兴趣的文章: