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

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

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

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

<!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

<!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范围 */

                background-color: cornflowerblue;

            }

            

            #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）

<!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

　

使用pdfobject.js实现在线浏览PDF的更多相关文章

  1. java实现在线浏览PDF文档功能

    实现在线浏览pdf文档功能(本代码适用于项目服务中固定的并且少量的pdf浏览,比如注册时的注册条款在线浏览等): //设置响应内容类型为PDF类型 response.setContentType(&q ...

  2. https://github.com/Lushenggang/show-pdf在线浏览pdf文件在线浏览pdf文件

    在线浏览pdf文件 https://github.com/Lushenggang/show-pdf https://github.com/Lushenggang/show-pdf

  3. 在线浏览PDF之PDF.JS （附demo）

    平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html#skill 下载地址:http://mozilla.gith ...

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

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

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

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

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

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

  7. 怎么用ABBYY在线浏览PDF文件

    ABBYY FineReader 让您可以从在线存储服务中打开图像或 PDF 文件,并将已识别文本保存至在线存储服务中,如 Dropbox.SkyDrive 或 Google Drive 等.通过在 ...

  8. vue 中PDF实现在线浏览，禁止下载，打印

    需求:在线浏览pdf文件,并且禁止掉用户下载打印的效果. 分析:普通的iframe.embed标签都只能实现在线浏览pdf的功能,无法禁止掉工具栏的下载打印功能.只能尝试使用插件,pdfobject. ...

  9. 在线打开,浏览PDF文件的各种方式及各种pdf插件------(MS OneDrive/google drive & google doc/ github ?raw=true)

    在线打开,浏览PDF文件的各种方式: 1 Google drive&doc   (国内不好使,you know GFW=Great Firewall) 1. google drive: 直接分 ...

随机推荐

  1. POI拆分单元格，并设置拆分后第一个cell的值为空cell的值

    // 从第A7开始,拆分单元格 CellReference ref = new CellReference("A7"); //遍历sheet中的所有的合并区域 for (int i ...

  2. TinyMCE不可编辑

    1. 通过配置在控件初始化时设置 tinyMCE.init({ readonly : 1 }); 2.tinymce.activeEditor.getBody().setAttribute('cont ...

  3. 华为云服务器centos7.3 安装jdk

    1. 进入oracle官网 https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 服 ...

  4. sqlite3 on python for newbies

    python 集成了 sqlite3 ,其接口很简单: import sqlite3 db_connection = sqlite3.connect(db_filename) db_cursor = ...

  5. UTC和GMT

    UTC GMT UTC = Coordinated Universal Time. 中文名称为协调世界时. GMT = Greenwich Mean Time. 中文名称为格林尼治(平)时 UTC = ...

  6. c++复习——临考前的女娲补天 >=.<

    一些零零散散的知识点... 1.抽象类只能作为其他类的基类,不能建立对象,但抽象类的派生类如果给出纯虚函数的函数体,这个派生类仍然是一个抽象类.//这个好理解 懂了 2.抽象类不能作为参数类型,函数的 ...

  7. HDU 1276 士兵队列训练问题（模拟）

    原题代号:HDU 1276 原题链接:http://acm.hdu.edu.cn/showproblem.php?pid=1276 题目原题: 士兵队列训练问题 Time Limit: 2000/10 ...

  8. 动态GI

    在Engine/Config 目录中找到ConsoleVariables.ini并打开,在其中加入 r.LightPropagationVolume = 1 ,保存,重启引擎 如果场景中有Post P ...

  9. SQL 基本查询语句

    --使用数据库 use date go --创建表班级表 create table classInfo ( classNo ,),--主键约束使用primary key identity classN ...

  10. java配置环境变量 jdk1.8

    1.首先第一步安装JDK window系统安装java 下载JDK 首先我们需要下载java开发工具包JDK,下载地址:http://www.oracle.com/technetwork/java/j ...