美文网首页
pdf.js 一个在线PDF 浏览插件

pdf.js 一个在线PDF 浏览插件

作者: 木木口丁 | 来源:发表于2017-05-24 17:27 被阅读0次

这个插件可以实现在浏览器阅读PDF文件,技术原型主要用于在 HTML5 平台上展示 PDF 文档,无需任何本地技术支持。

好像也是Mozilla Firefox的插件

官网

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插件

参考链接

相关文章

网友评论

      本文标题:pdf.js 一个在线PDF 浏览插件

      本文链接:https://www.haomeiwen.com/subject/sujoxxtx.html