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

转载于:https://www.cnblogs.com/miaolyou/p/11150906.html

PDFObject的使用（转）相关推荐

  1. 前端 PDFObject.embed预览PDF，另类方式隐藏工具条样例

    <body> <div id="divid"></div> </body> <script > var filePath ...

  2. PDFObject.js的使用

    首先导入PDFObject.js文件,然后在加入下面的代码段 <script type="text/javascript"> window.onload = funct ...

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

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

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

    详细链接:https://shop499704308.taobao.com/?spm=a1z38n.10677092.card.11.594c1debsAGeak VS2010版本以及以上版本源码下载 ...

  5. 深入理解pdf.js，PDFObject, iframe 三种方式来打开PDF文件的区别

    浏览器原生就是支持打开PDF文件的. 所以使用iframe打开就相当于是使用浏览器自带的PDF插件打开,这个很好理解. 至于PDFObject,他是借助了embed这个标签,这个标签是什么概念? HT ...

  6. Asp.net Core 配合 PDFObject 和 pdf.js 在浏览器显示pdf文件

    Asp.net Core 配合 PDFObject 和 pdf.js 在浏览器直接显示pdf文件 测试环境的浏览器版本: Chrome :90.0.4430.93(64 位) FireFox :88. ...

  7. PDFObject实现pdf文件预览

    官方例子: https://pdfobject.com/#examples 下面主要解决非固定路径的pdf文件浏览 pdf的路径作为参数传入 <!DOCTYPE html> <htm ...

  8. pdf预览 pdf.js+pdfObject

    1.下载pdf.js 第一步,下载源码:git clone git://github.com/mozilla/pdf.js.git (直接github下载zip 不能直接使用) 第二步 ,cd pdf ...

  9. 利用pdfobject工具处理pdf

    一.引用包 官方网址:Pdfobject <script src="../resource/js/pdfobject.min.js"></scritp> 二 ...

  10. 使用pdfobject预览pdf

    之前写过一篇预览pdf的,Vue使用vue-pdf实现PDF文件预览 ,大家按需所用 一般项目中在上传文件之前可能会有 先预览一下,看是否符合要求,符合再上传,这里先说了pdf文件,使用pdfobje ...

最新文章

  1. dlib人脸比对算法代码java,Python 使用dlib 5行代码实现人脸比对
  2. Unity3D+VR的实现
  3. 解决eclipse显示jar源代码中文乱码问题
  4. RabbitMQ的Work能者多劳模式
  5. Openg-三角形绘制
  6. 请使用复选框选择_使用可选是可选的
  7. java 代码造假_老板居然让我在Java项目中“造假”
  8. Linux内核自旋锁
  9. host不能访问虚拟机内web service中踩到的坑--2017年5月3日
  10. java之模块学习-JAVA的IO流
  11. MATLAB中的Hough变换
  12. ArcGIS网络分析扩展模块
  13. web界面设计（一）
  14. 计算机四级数据库工程师考什么,计算机四级《数据库工程师》考试大纲
  15. 《OpenGL编程指南第7版》3视图
  16. 3GPP 3GPP2等协议文档下载网址汇总
  17. 找不到网站的服务器 dns 地址,为什么网站一直显示找不到服务器DNS地址？
  18. 教育培训行业使用CRM管理系统有什么好处
  19. SOA教程之：SOA的优点和缺点
  20. D3.js 绘制立体柱状图

热门文章

  1. linux网络串口工具下载,串口调试工具手机版下载
  2. RG Magic Bullet
  3. 小米手机电池恢复代码_小米手机隐藏技巧，你真的会用吗？别再浪费如此强大的功能了...
  4. 简单介绍——【汇总统计数据】工具（ArcMap）
  5. python零基础教学plc_编程零基础应当如何开始学习 Python？
  6. 一次性密码本(绝对无法破译)
  7. 【AI识人】OpenPose：实时多人2D姿态估计 | 附视频测试及源码链接
  8. 基于python的数字印刷体识别_不告诉你我用了它配合Python简简单单开发OCR识别，带你识别手写体、印刷体、身份证等N种，附代码！...
  9. epson连接计算机后无法打印,如何解决连接到Epson打印机后计算机无法打印的问题...
  10. ContextCapture Smart3D 使用问题汇总