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. python数组中在某一元素前插入数据

    # 已知有一个已经排好序的数组.要求是,有一个新数据项,要求按原来的规律将它插入数组中. a=[1,2,3,4,5,6,7,8,9]num=int(input("input num:&quo ...

  2. LeetCode--148--排序链表(python)

    在 O(n log n) 时间复杂度和常数级空间复杂度下,对链表进行排序. 示例 1: 输入: 4->2->1->3输出: 1->2->3->4示例 2: 输入: ...

  3. React native 之 Promise

    关键词:Promise Promise.all Promise是什么?=> https://www.runoob.com/w3cnote/es6-promise.html Promise.all ...

  4. #452 Div2 Problem C Dividing the numbers ( 思维 || 构造 )

    题意 : 将从 1 ~ n 的数分成两组,要求两组和的差值尽可能小,并输出其中一组的具体选数情况 分析 : 如果将这 n 个数从大到小四个一组来进行选择的话那么差值就为 0 ,然后再来考虑 n%4 ! ...

  5. 【bzoj3926】[Zjoi2015]诸神眷顾的幻想乡

    *题目描述: 幽香是全幻想乡里最受人欢迎的萌妹子,这天,是幽香的2600岁生日,无数幽香的粉丝到了幽香家门前的太阳花田上来为幽香庆祝生日. 粉丝们非常热情,自发组织表演了一系列节目给幽香看.幽香当然也 ...

  6. UVALive 3958 Weird Numbers （负进制数）

    Weird Numbers 题目链接: http://acm.hust.edu.cn/vjudge/contest/129733#problem/F Description Binary number ...

  7. LuceneNET全文检索封装

    一.源码特点       1.  Lucene.net是Lucene的.net移植版本,是一个开源的全文检索引擎开发包,即它不是一个完整的全文检索引擎,而是一个全文检索引擎的架构,提供了完整的查询引擎 ...

  8. POJ2395 Out of Hay（求最小生成树中最大的边权，Kruskal）

    POJ2395 Out of Hay 寻找最小生成树中最大的边权. 使用 Kruskal 求解,即求选取的第 \(n-1\) 条合法边. 时间复杂度为 \(O(e\log e)\) . #includ ...

  9. Android SDK Android NDK Android Studio 官方下载地址<转>

    转自:http://www.cnblogs.com/yaotong/archive/2011/01/25/1943615.html 2016.10Android Studio 2.2.1.0https ...

  10. uid auid euid的区别

    关于euid suid guid,参考这篇很好的文章 uid auid euid的区别? initially: 最初地, 一开始地 jackson had initially bloodied his ...