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. Apache HttpClient 读取响应乱码问题总结

    Apache HttpClient 读取响应乱码问题总结 setCharacterEncoding  Content-Type  HttpClient  起因 最近公司产品线研发人员调整,集中兵力做战 ...

  2. 前端之JQuery：JQuery属性操作

    Jquery2--属性相关的操作 知识点总结 1.属性 属性(如果你的选择器选出了多个对象,那么默认只会返回出第一个属性). attr(属性名|属性值) - 一个参数是获取属性的值,两个参数是设置属性 ...

  3. 【leetcode】698. Partition to K Equal Sum Subsets

    题目如下: 解题思路:本题是[leetcode]473. Matchsticks to Square的姊妹篇,唯一的区别是[leetcode]473. Matchsticks to Square指定了 ...

  4. js 获取滚动位置，滚动到指定位置，平滑滚动

    1.获取当前滚动条位置信息 var top = dom.scrollTop; // 获取y轴上的滚动位置 var left = dom.scrollLeft; // 获取x轴上的滚动位置 2.滚动到指 ...

  5. 面试题常考&必考之--js中的call()和apply()

    apply: 接受两个参数,第一个参数是要绑定给this的值,第二个参数是一个参数数组.当第一个参数为null.undefined的时候,默认指向window. call: 第一个参数是要绑定给thi ...

  6. select下拉框数据回显

    前台页面 <select class="select" name="operatorId" id="operatorId" style ...

  7. php开发常用技巧总结

    1.[本地开启xdebug导致执行时间超max_execution_time产生的问题处理方法]xdebug开启,会导php执行速度慢,超max_execution_time,这种情况下有必要合理设置 ...

  8. JavaScript 查看stack trace

    How can I get a JavaScript stack trace when I throw an exception? Edit 2 (2017): In all modern brows ...

  9. h5离线缓存

    离线缓存:application cache 什么是离线缓存: 离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,将需要的文件缓存下来,以便后期即使没链接网络,被缓存的页面也可以展示 ...

  10. 九、MySQL报错（ (1292, u"Truncated incorrect DOUBLE value: '424a000000066'") result = self._query(query)）

    1.数据库sql语句:SELECT seat_id FROM netsale_order_seat os join netsale_order nor on os.order_code=nor.ord ...