pdf.js 使用实例

时间：2019-01-09 13:40:58 阅读：233 评论：0 收藏：0 [点我收藏+]

标签：else round ext dex 架构 files span UNC 详细

pdf.js可以实现在html下直接浏览pdf文档，是一款开源的pdf文档读取解析插件

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

下载地址：http://cnblogs.com/files/xiangliuyunyang/build.zip

两个主要demo

1.点击连接读取第一页的pdf文档：http://www.51purse.com/pdf/web/demo1.html（此处没有自己上传）

2.点击连接，选择需要打开的文件，进行pdf预览：http://www.51purse.com/pdf/web/demo2.html（此处没有自己上传）

参考代码：

demo1:

<html>
<head>
    <meta charset="UTF-8">
    <title>Document</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);
        }
        .pop{
            position: absolute;
            left: 50%;
            width: 894px;
            margin-left: -447px;
            z-index: 9;
        }
    </style>
    <script src="Scripts/pdf.js" type="text/javascript"></script>
    <script type="text/javascript">
        function showPdf() {
            var container = document.getElementById("container");
            container.style.display = "block";
            var url = ‘Scripts/jQuery经典入门教程(绝对详细).pdf‘;
            PDFJS.workerSrc = ‘Scripts/pdf.worker.js‘;
            PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
                pdf.getPage(1).then(function getPageHelloWorld(page) {
                    var scale = 1;
                    var viewport = page.getViewport(scale);
                    var canvas = document.getElementById(‘the-canvas‘);
                    var context = canvas.getContext(‘2d‘);
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;
                    var renderContext = {
                        canvasContext: context,
                        viewport: viewport
                    };
                    page.render(renderContext);
                });
            });
        }
    </script>
</head>
<body>
    <h1><a href="javascript:void(0)" target="_blank" onclick="showPdf()">显示pdf文档</a></h1>
    <div id="container" style="display: none;">
        <div class="lightbox"></div>
        <div id="pop" class="pop">
            <canvas id="the-canvas"></canvas>
        </div>
    </div>
</body>
</html>

demo2:

<html>
<head>
    <meta charset="UTF-8">
    <title>Document</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>

项目架构：技术分享图片

转自：https://www.cnblogs.com/xiangliuyunyang/p/5956453.html

pdf.js 使用实例

标签：else round ext dex 架构 files span UNC 详细

原文地址：https://www.cnblogs.com/w821759016/p/10243546.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行