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. 3.docker镜像管理基础

    一.docker镜像相关 1.About Docker Image Docker镜像含有启动容器所需要的文件系统及其内容,因此,其用于创建并启动docker容器. 采用分层构建机制,最底层为bootf ...

  2. 【LuoguP4770】[NOI2018] 你的名字

    题目链接 题意简述 给定一个串 \(S\) 多组询问 , 每次给定一个串 \(T\) 和一个 区间 \([l,r]\) 求串\(T\) 有多少个本质不同的子串 满足不是 \(S[l...r]\) 的子 ...

  3. python代码执行bash命令 -- python3 cook book

    python代码执行bash命令相关 -- python3 cook book refer: https://python3-cookbook.readthedocs.io/zh_CN/latest/ ...

  4. weighted choice in python

    对列表按概率采样 Input: a collection C of elements and a probability distribution p over C; Output: an eleme ...

  5. POJ 3280 Cheapest Palindrome ( 区间DP && 经典模型 )

    题意 : 给出一个由 n 中字母组成的长度为 m 的串,给出 n 种字母添加和删除花费的代价,求让给出的串变成回文串的代价. 分析 :  原始模型 ==> 题意和本题差不多,有添和删但是并无代价 ...

  6. 【bzoj1096】[ZJOI2007]仓库建设

    *题目描述: L公司有N个工厂,由高到底分布在一座山上.如图所示,工厂1在山顶,工厂N在山脚.由于这座山处于高原内陆地区(干燥少雨),L公司一般把产品直接堆放在露天,以节省费用.突然有一天,L公司的总 ...

  7. Fiddler简介以及web抓包1

    一.Fiddler简介 简单来说,Fiddler是一个http协议调试代理工具,它能够记录并检查所有你的电脑和互联网之间的http通讯.网上简介很多,我们不多说. 二.Fiddler版本 Fiddle ...

  8. django搭建一个小型的服务器运维网站

    前言   不管是运维还是开发抑或是测试,工作中不免会和Linux服务器打交道,常见的操作譬如:查看CPU或内存状态.查看和修改服务器时间.查看或者修改服务器配置文件.实时查看或回看系统的日志.重启服务 ...

  9. mysql分组,行转列

    aaarticlea/jpeg;base64,/9j/4QEsRXhpZgAASUkqAAgAAAAPAJqCCgABAAAAwgAAABABAgAQAAAAygAAAAABAwABAAAAQBAAA

  10. cefsharp 在高DPI下闪烁的问题

    今天有客户朋友说程序在他的surface下界面很闪烁,搜索了相关的资料,初步判定是DPI引起的问题,但也有可能是cefsharp 51版本在WIN10上面没有禁用GPU加速,苦于没有环境测试,所以抱着 ...