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. iView栅格的使用

    一般情况下栅格系统都会把每行row分为12列,但是iview是采用了24栅格系统,将区域进行24等分 基础用法 实例代码: <template> <Row> <Col s ...

  2. awk基础学习

    2019-12-20 需要巧记,很多格式,学习难度:grep.sed.awk awk知识概述 1三剑客awk命令介绍2三剑客awk命令执行原理语法结构3三剑客awk命令实操练习查询替换信息排除(取反) ...

  3. js 将时间戳转为日期格式

    最近项目需要在前端将一个13位的时间戳显示成日期格式,在网上查了很多都不符合要求,只有一个是能满足要求的,在这记录一下,说不定以后还用的着. 13位时间戳改为yyyy-MM-dd HH-mm-ss 格 ...

  4. R语言预测实战（第二章--预测方法论）

    2.1预测流程 从确定预测主题开始,一次进行数据收集.选择方法.分析规律.建立模型.评估效果直到发布模型. 2.2.1确定主题 (1)指标:表达的是数量特征,预测的结果也通常是通过指标的取值来体现. ...

  5. Internet History, Technology, and Security（week5）——Technology: Internets and Packets

    前言: 之前都在学习Internet的历史,从这周开始,进入到了Internet技术的学习. Layer1: Link Introduction / The Link Layer 80年代之前,主流网 ...

  6. UNR#3 Day1——[ 堆+ST表+复杂度分析 ][ 结论 ][ 线段树合并 ]

    地址:http://uoj.ac/contest/45 第一题是鸽子固定器. 只会10分.按 s 从小到大排序,然后 dp[ i ][ j ][ k ] 表示前 i 个元素.已经选了 j 个.最小值所 ...

  7. 170907-关于JavaWeb的题

    1. 答案是B.D Servlet 通过调用 init () 方法进行初始化. Servlet 调用 service() 方法来处理客户端的请求. Servlet 通过调用 destroy() 方法终 ...

  8. 原生javascript代码懒加载

    1.先定义需要懒加载的样式: class="lazyload" 2.设置初始透明度为0.1: .lazyload{ filter: Alpha(opacity=10); -moz- ...

  9. JavaVM & JNIEnv

    JNIEnv提供了大多数的JNI函数.你的本地方法都会接收JNIEnv作为第一个参数.JNIEnv用于本地线程存储.因此,你不能在线程间共享同一个JNIEnv.如果一个代码段没有其他方式获取它自身线程 ...

  10. 三十五、robotframework中怎么将100转化成100.00

    1.将100转化成100.00