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

这个插件可以实现在浏览器阅读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插件

参考链接

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容