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. man wc

    WC(1)        User Commands/用户命令            WC(1) NAME/名称       wc - print the number of newlines, wo ...

  2. Spring Batch Hello World

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11995146.html Project Directory Maven Dependency < ...

  3. json对象之间的转化

    json字符串转化为 1.使用JSON.parse()函数 使用eval()函数 2.json对象转化为json字符串 使用JSON.stringify()

  4. 8，HashMap子类-LinkedHashMap

    在上一篇随笔中,分析了HashMap的源码,里面涉及到了3个钩子函数(afterNodeAccess(e),afterNodeInsertion(evict),afterNodeRemoval(nod ...

  5. 解决json不能解析换行问题

    今天遇到一个问题,当我读取数据库中某条带换行的数据时,解析错误. 解决方法是在存入数据库时对数据做处理,把换行换成其他字符.代码如下: remark = remark.replace(/\n/g,&q ...

  6. docker-compose简介

    一.Docker-Compose简介   Docker-Compose项目是Docker官方的开源项目,负责实现对Docker容器集群的快速编排.   Docker-Compose将所管理的容器分为三 ...

  7. Count on a tree(树上路径第K小)

    题目链接:https://www.spoj.com/problems/COT/en/ 题意:求树上A,B两点路径上第K小的数 思路:主席树实际上是维护的一个前缀和,而前缀和不一定要出现在一个线性表上. ...

  8. B. Equal Rectangles

    B. Equal Rectangles 给定4*N个数,是否能构成N个矩形 面积均相等 每次取两个大的,两个小的 #include<bits/stdc++.h> using namespa ...

  9. Python学习笔记（三）- SyntaxError: Non-ASCII character '\xe7' in file

    在编辑Python时,当有中文输出或者注释时,出现错误提示:“SyntaxError: Non-ASCII character '\xe7' in file“ 原因:python的默认编码文件是用的A ...

  10. Matlab 中 函数circshift()的用法

    a = [ ; ; ]; b = [- - -; - - -;- - -]; c = [ ; ; ]; Hist(:,:,) = a; Hist(:,:,) = b; Hist(:,:,) = c; ...