使用pdfobject.js实现在线浏览PDF

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>在指定div中浏览PDF</title>
        <!--在此引入bootstrap只为初始化样式div样式-->
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <style>
            /* 添加样式是为了实现全屏效果 */
            html,body{
                height: 100%;
                overflow: hidden;
            }
            
            #example1{
                height: 100%;
            }
            
            .pdfobject-container{
                /* height: 500px; */
            }
            
            .pdfobject{
                /* border: 1px solid #666; */
            }
        </style>
    </head>
    
    <body>
        <div id="example1"></div>
            
        <script type="text/javascript" src="js/pdfobject.min.js"></script>
        <script>
            // 我的pdf文件放在项目的pdf文件夹下,名字叫做Java.pdf,指定PDF从20页开始阅读
            PDFObject.embed("pdf/Java.pdf", "#example1", {page: "20"});
        </script>
    </body>
</html>

How to embed a PDF without using JavaScript

方式一:

<embed src="/pdf/sample-3pp.pdf#page=2" type="application/pdf" width="100%" height="100%" />

方式二:

<iframe src="/pdf/sample-3pp.pdf#page=2" width="100%" height="100%">
</iframe>

方式三:

<object data="/pdf/sample-3pp.pdf#page=2" type="application/pdf" width="100%" height="100%">
   <b>Example fallback content</b>: This browser does not support PDFs. Please download the PDF to view it: 
   <a href="/pdf/sample-3pp.pdf">Download PDF</a>.
</object>

方式四:

<object data="/pdf/sample-3pp.pdf#page=2" type="application/pdf" width="100%" height="100%">
   <iframe src="/pdf/sample-3pp.pdf#page=2" width="100%" height="100%" style="border: none;">
     This browser does not support PDFs. Please download the PDF to view it: 
     <a href="/pdf/sample-3pp.pdf">Download PDF</a>
   </iframe>
</object>

发表评论

电子邮件地址不会被公开。 必填项已用*标注