1.pdfobject.js官网：https://pdfobject.com/

2.在html文件中引入这个文件，以pdfobject.min.js为例

1
<script type="text/javascript" src="js/pdfobject.min.js"></script>

　效果1：在指定位置（当指定位置为全局时）浏览PDF，最终效果类似3.1，不做演示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!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
            PDFObject.embed("pdf/Java.pdf", "#example1");
        </script>
    </body>
</html>

　　

效果2：在指定位置（当指定位置为局部时）浏览PDF

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!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;
                /* 添加背景颜色是为了方便查看整个body范围 */
                
            }
             
            #example1{
                /* 设置放置PDF的div的样式 */
                height: 50%;
                width: 50%;
            }
             
            /* PDF容器样式 */
            .pdfobject-container{
                /* height: 500px; */
            }
             
            /* PDF样式 */
            .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
            PDFObject.embed("pdf/Java.pdf", "#example1");
        </script>
    </body>
</html>

　　

效果3：指定从多少页开始阅读（必须同时指定显示PDF的div）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!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>

　　

原文地址：https://i.cnblogs.com/EditPosts.aspx?opt=1

转自：https://www.cnblogs.com/liyouwu/p/9722590.html

PDFObject的使用（转）的更多相关文章

  1. PDFobject插件使用，PDF在线查看插件

    1.引入插件JS <script type="text/javascript" src="PDFobject.js"></script> ...

  2. .net使用pdfobject.js加载pdf文件

    1.下载pdfobject.js文件 2. <script type="text/javascript" src="<%= Application[" ...

  3. [转]PDF预览插件PDFObject.js

    本文转自:http://pdfobject.com/index.php When possible, use standardized HTML markup and avoid JavaScript ...

  4. 在线浏览pdf文件，pdfobject的简单使用

    该js插件,官网有详细的使用教程(网址:http://www.pdfobject.com/examples/).打开里面的例子后,查看新打开页面,打开并查看该页面的源代码. 需要的材料: 1.PDFo ...

  5. Asp.net MVC 利用(aspose+pdfobject.js) 实现在线预览word、excel、ppt、pdf文件

    在线预览word.excel.ppt利用aspose动态生成html 主要代码 private bool OfficeDocumentToHtml(string sourceDoc, string s ...

  6. PDF预览之PDFObject.js总结

    get from:PDF预览之PDFObject.js总结   PDFObject.js - 将PDF嵌入到一个div内,而不是占据整个页面(要求浏览器支持显示PDF,不支持,可配置PDF.js来实现 ...

  7. 基于ASP.NET MVC 利用(Aspose+Pdfobject.js) 实现在线预览Word、Excel、PPT、PDF文件

    #region VS2010版本以及以上版本源码下载地址:http://download.csdn.net/download/u012949335/10231812 VS2012版本以及以上版本源码下 ...

  8. PDFObject.js、jquerymedia.js、pdf.js的对比

    由于在做手机项目中需要用到预览pdf文件的需求,一搜还真多,试用后发现兼容性不是很好,大多需要浏览器对pdf阅读的支持: 如果你只是想不依赖浏览器本身对pdf解析的情况下,在手机展示pdf文件,就需要 ...

  9. pdf 在线预览之 pdfobject插件

    支持到ie9 可以不用安装  如果安装 npm i pdfobject 第一步:引入pdfObject包 申明一个变量 const { PDFObject } = require("../. ...

随机推荐

  1. nmon监控使用

    1.上传nmon_linux_x86_64文件到服务器 2.修改文件权限chmod 775 nmon_linux_x86_64 3.压测时需要执行以下命令监控服务器./nmon_linux_x86_6 ...

  2. Linux培训教程 linux下修改用户权限的方法

    一般我们日常碰到要修改用户权限的,往往是要么修改一下用户的gorupid,通过上面命令可以改;要么是把普通用户改成具有超级权限的用户,这个一般自己不能直接改,只能是root或有root权限的用户才能帮 ...

  3. html b标签 语法

    html b标签 语法 标签b是什么意思? b的意思是bold,b标签主要用于html中规定粗体文本,该标签内的字符将被设为粗体.B标签所传达的意思只是加粗,没有任何其它的作用. 作用:规定粗体文本. ...

  4. JUnit——Annotation

    Annotation是对属性,方法或者类做一个标记  比如@override表示复写了父类中的方法 [1]@Test: 测试方法(说明该方法为测试方法) a)(expected=XXException ...

  5. noi 求分数序列和 x

    求分数序列和 总时间限制:  1000ms 内存限制:  65536kB 描述 有一个分数序列 q1/p1,q2/p2,q3/p3,q4/p4,q5/p5,.... ,其中qi+1= qi+ pi, ...

  6. 2019 Multi-University Training Contest 3 T7 Find the answer

    Find the answer Time Limit: 4000/4000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Tota ...

  7. sh_03_第1个函数

    sh_03_第1个函数 # 注意:定义好函数之后,之表示这个函数封装了一段代码而已 # 如果不主动调用函数,函数是不会主动执行的 def say_hello(): print("hello ...

  8. sh_04_判断考试成绩

    sh_04_判断考试成绩 # 练习2: 定义两个整数变量 python_score.c_score,编写代码判断成绩 python_score = 50 c_score = 50 # 要求只要有一门成 ...

  9. [CSP-S模拟测试]:简单计算（数学）

    题目传送门(内部题104) 输入格式 第一行一个正整数$T$,表示该测试点内的数据组数,你需要对该测试点内的$T$组数据都分别给出正确的答案才能获得该测试点的分数. 接下来$T$组数据,每组数据一行两 ...

  10. ACM ICPC 2011-2012 Northeastern European Regional Contest（NEERC）B Binary Encoding

    B: 现在有一种新的2进制表示法,要你求出0~m-1的每个数的表示. 规则如下:n 是满足 m<=2n 最小数. 而0~m-1的数只能够用n-1个位和n个位来表示. 对于n个位表示的数来说不能有 ...