pdf在线预览以及pdf转图片展示的问题

浏览器在线预览pdf

引用pdfobject.js插件但微信浏览器不支持pdf格式，下面用到pdf.js转图片展示

资源可见：https://download.csdn.net/download/qq_39201210/10560790

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<head>
    <script type="text/javascript" src="../jquery-3.2.1.min.js"></script>
    </style>
</head>

 <button class="btn btn-primary" onclick="preViewPDF()">PDFObject预览本地PDF</button>
 <div id="pdfDiv"></div>
    



    <script>
        //预览PDF文件
            function preViewPDF(){
                if(PDFObject.supportsPDFs){
                       alert("您的浏览器支持PDF预览功能");
                } else {
                    var browserType = getOs();
                    if(browserType=="Firefox"){
                          alert("火狐浏览器支持PDF预览功能");
                    }else{
                        alert("您的浏览器不支持PDF预览功能");
                    }
                }
                PDFObject.embed("1532335523295SC0001986828209.pdf", "#pdfDiv");
            }
    </script>
    <script src='pdfobject.js'></script>
</body>
</html>

需要用到pdf.js 与pdf.worker.js 注意pdf.js必须放在服务器上才能运行成功

资源可见：https://download.csdn.net/download/qq_39201210/10560778 这里面少了一个worker.js 请自行下载引用

<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="pdf.js" type="text/javascript"></script>

    <script type="text/javascript">
        function showPdf() {
            var container = document.getElementById("container");
            container.style.display = "block";
            var url = '1532335523295SC0001986828209.pdf';//pdf路径
            PDFJS.workerSrc = 'pdf.worker.js';//引用pdf.worker
            PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
//一个pdf可能有多页的情况，这里是遍历转多页
                for (var i = 1; i < pdf.numPages+1; i++) { 
                    pdf.getPage(i).then(function getPageHelloWorld(page) {
                        var scale = 2;
                        var viewport = page.getViewport(scale);
                        // var canvas = document.getElementById('the-canvas');
                        var canvas = document.createElement('canvas');
                        var context = canvas.getContext('2d');
                        canvas.height = viewport.height;
                        canvas.width = viewport.width;
                        var renderContext = {
                            canvasContext: context,
                            viewport: viewport
                        };
                        page.render(renderContext);
                          // 这里拿body当pdf容器  
                        document.body.appendChild(canvas);  
                        page.render({ canvasContext: context, viewport: viewport });
                    });
                     
                }
            });
        }

    </script>
</head>
<body>
<h1><p onclick="showPdf()">显示pdf文档</p></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>

pdf在线预览 以及pdf转图片展示的问题

猜你喜欢

pdf在线预览以及pdf转图片展示的问题