详解 使用pdf.js 插件实现pdf文档在线浏览功能

HTML5 herman 6722浏览 0评论

在很早之前就想实现一个pdf在线预览的功能,只是限于流量和对服务器性能要求较高作罢。现在本文将其中涉及的到关键技术共享给大家。

pdf.js 插件介绍

pdf.js可以实现在html下直接浏览pdf文档,是一款开源的pdf文档读取解析插件。官方地址:http://mozilla.github.io/pdf.js/

pdf.js主要包含两个库文件,一个pdf.js和一个pdf.worker.js,,一个负责API解析,一个负责核心解析。

下面是 pdf.js 插件结构图

pdf.js 插件结构图

pdf.js 制作 pdf文档在线阅读功能

首先我们需要将 pdf.js 从官网上下载下来。然后项目,在项目中放置一个待预览的pdf文档,同时将pdf.js 复制到项目中。新建一个index.html文件。内容如下:

<html>
<head>
    <meta charset="UTF-8">
    <title>业余草:www.xttblog.com pdf在线预览</title>
    <style type="text/css">
        .lightbox{
            position: fixed;
            top: 0px;
            left: 0px;
            height: 100%;
            width: 100%;
            z-index: 7;
            opacity: 0.3;
            display: block;
            background-color: rgb(0, 0, 0);
            display: none;
        }
        .pop,iframe{
            position: absolute;
            left: 50%;
            top:0;
            width: 893px;
            height: 100%;
            margin-left: -446.5px;
            z-index: 9;
        }
    </style>
    <script src="Scripts/pdf.js" type="text/javascript"></script>
    <script type="text/javascript">
        function showPdf(isShow) {
            var state = "";
            if (isShow) {
                state = "block";
            } else {
                state = "none";
            }
            var pop = document.getElementById("pop");
            pop.style.display = state;
            var lightbox = document.getElementById("lightbox");
            lightbox.style.display = state;
        }
        function close() {
            showPdf(false);
        }
    </script>
</head>
<body>
    <ul>
        <li><a href="Scripts/jQuery经典入门教程(绝对详细).pdf" target="pdfContainer" onclick="showPdf(true)">0001_pdf</a></li>   
    </ul>
    <div class="lightbox" id="lightbox"></div>
    <div id="pop" class="pop" style="display: none;">
        <a href="javascript:close()" style="
            position: absolute;
            right: -90px;
            display: inline-block;
            width: 80px;
            height: 30px;
        " id="close">关闭</a>
        <iframe src="" frameborder="0" id="pdfContainer" name="pdfContainer"></iframe>
    </div>
</body>
</html>

项目结构如下图所示:

PDF文档在线阅读功能

项目运行效果

pdf在线浏览效果图点击查看运行效果:http://mozilla.github.io/pdf.js/web/viewer.html

注意:如果遇到无法阅读的情况,请按下图操作。

设置浏览器自定义安全级别

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763,QQ2群:454796847,QQ3群:187424846。QQ群进群密码:xttblog,想加微信群的朋友,可以微信搜索:xmtxtt,备注:“xttblog”,添加助理微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » 详解 使用pdf.js 插件实现pdf文档在线浏览功能