使用pdfobject.js实现在线浏览PDF

最新推荐文章于 2024-05-24 15:40:49 发布
最新推荐文章于 2024-05-24 15:40:49 发布
阅读量3.8w 收藏 46
点赞数 6
分类专栏： 前端开发 文章标签： 在线浏览PDF H5 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/i_dont_know_a/article/details/80707963
版权

闲来无事，就翻看了一个同学的作品，作品中有一个展示他的简历的页面，简历写在一个PDF中。

 

然后在页面中直接显示出来了，可以下载，还可以打印，这个技术我还没有尝试过呢。

 

正好想弄点新鲜玩意儿玩玩，忽然想起前段时间我也收藏过关于这个技术的几篇博客，就把这几篇收藏打开，看看怎么实现这个效果。

 

 

▍特点

 

1、能自由选择需要浏览的页面

 

 

2、从左至右依次为PDF转向、下载、打印、查看目录（这款插件能自动识别PDF目录，并且根据目录进行快速访问）

 

 

 

3、调整PDF大小

 

 

 

▍框架

 

几乎所有的博客都写到了一个叫做pdfobject.js的框架，所以我也在官网下载了这个js框架。

 

官网：https://pdfobject.com/

 

 

▍操作步骤及代码

 

1、下载js框架

 

1.1、打开官网：https://pdfobject.com/

 

 

 

1.2、下载框架

 

 

1.3、文件目录如下，至此，第一步完成

 

 

2、部署js框架

 

2.1、将pdfobject.js或pdfobject.min.js放入项目存放js文件的文件夹中

 

 

 

2.2、在html文件中引入这个文件，以pdfobject.min.js为例

<script type="text/javascript" src="js/pdfobject.min.js"></script>

3、应用框架并实现在线浏览PDF的效果

 

3.1、最简单的应用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>在线浏览PDF</title>
    </head>
    
    <body>
    
        <script type="text/javascript" src="js/pdfobject.min.js"></script>
        <script>
            // 我的pdf文件放在项目的pdf文件夹下，名字叫做Java.pdf
            PDFObject.embed("pdf/Java.pdf");
        </script>
    </body>
</html>

效果：

 

 

3.2、效果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>

3.3、效果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.4、效果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>

效果：

 

 

4、目前我了解到的切实有用的大致就只有以上这些了

 

 

▍我是尾巴

 

简单实用，不可多得。

 

关注微信公众号：爱唱歌的蜗牛先生

 

 

门时
关注
  • 6
    点赞
  • 踩
  • 46
    收藏
    觉得还不错? 一键收藏
  • 36
    评论
专栏目录
pdf文件在线预览，兼容多浏览器和手机端
路人也是身边人的博客
11-06 2万+
前言 最近学习了一下网页在线预览pdf文件的实现方式，主要有： PDFObject：使用起来非常方便，电脑端兼容性好，试过能兼容ie9,也很快，但在手机上一些浏览器无法在线. jquery.media.js：使用起来非常方便，不支持ie。ie的话可以提示安装插件实现预览点击下载。不支持手机端。而且要写代码判断ie浏览器以及是否已安装插件，可以百度，都有的。 PDF.js：功能强大，使用起来代码相对...
在线pdf预览插件pdfobject.js设置参数使用pdf预览
11-24
在线pdf预览插件pdfobject.js设置参数使用pdf预览
pdf.js使用demo(已解决隐藏打印下载等按钮）
07-11
pdf.js使用demo(已解决隐藏打印下载等按钮）
pdfobject网页中在线浏览
12-26
pdfobject实现pdf在网页中在线浏览，其中包含代码和pdfobject.js，用于用户使用web工具浏览pdf.
vue-officef实现pdf文件在线预览
最新发布
ChenJin_2的博客
05-24 624
vue-officef实现pdf文件在线预览
pdfobject.js
08-27
PDFObject.js是一个 JavaScript 库用来在HTML中动态嵌入 PDF 文档 PDFObject.js是一个 JavaScript 库用来在HTML中动态嵌入 PDF 文档
PDFObject - 简单易用的PDF嵌入解决方案
gitblog_00059的博客
03-14 899
PDFObject - 简单易用的PDF嵌入解决方案 PDFObject 是一个轻量级 JavaScript 库，它允许您在网页中轻松地嵌入 PDF 文件。该项目由 Pipwerks 创建并维护，并且可以免费使用。 项目简介 PDFObject 可以帮助开发者将 PDF 文档无缝集成到他们的网站或应用程序中。只需一行代码，您就可以向页面中添加一个交互式、可缩放的 PDF 预览区域。无需安装任何额外...
PDF预览之PDFObject.js总结
beyond__devil的博客
12-17 2万+
PDFObject.js - 将PDF嵌入到一个div内，而不是占据整个页面(要求浏览器支持显示PDF，不支持，可配置PDF.js来实现) 官网: https://pdfobject.com/ github地址： https://github.com/pipwerks/PDFObject 支持： PDFObject 2.0不向后兼容1.0版本，针对现代浏览器设计，支持Chrome, F
使用pdfobject.js实现在线浏览PDF--前端显示PDF
snow_love_xia的博客
04-18 3373
上一篇：使用pdfobject.js实现在线浏览PDF–后台上传保存文件 上一篇分享了后台保存PDF文件的，这一篇就仔细分享前端显示PDF文件的流程， 官网：https://pdfobject.com/ 一、下载js框架 1.1、打开官网：https://pdfobject.com/ 1.2、下载框架 1.3、文件目录 至此第一步下载已经完成 二、部署js框架 2.1、将js复制到你的项目中...
基于openoffice+pdfobject.js实现文档上传以及在线预览功能
qq_44952181的博客
06-08 652
通过openoffice将文档转换为pdf格式再通过pdfobject.js回显
pdfobject.js和pdf.js的详解
Brilliant Me 的博客
12-05 8703
最近的工作中遇到了很多坑，主要是因为最近做的报表，需要展示pdf文件，遇到很多问题，在这里我来一一描述下。 以下是大概遇到的问题描述： 使用的h5的embed标签展示pdf文件。ie那货却必须要装插件才能预览。简直恶心 经理让去掉打印和下载按钮，就是要自己控制浏览器的显示 第一个问题的解决当时再网上查询了这种资料，决定将embed换成 PDFObject.js 然后就在github上下载pdfo
文档在线预览（三）使用js前端实现word、excel、pdf、ppt 在线预览
热门推荐
fhey的博客
05-27 2万+
本文主要介绍了word、excel、pdf、ppt等文件纯前端实现在线预览的方式，从本文的测试情况来看前端实现预览最好的效果还是PDF（或者是图片），不会出现一些文字错乱和乱码的问题，所以一般好的方案就是后端配合将不同格式的文件转换成pdf，转成统一的文件格式，再由前端实现预览效果，这样能保留文件的一些样式的效果，同时前端也只用支持一种文件格式的预览，工作量也能大大降低。
pdfobject.js 带教程
08-16
超强html页面渲染pdf文件插件，具体用法参考我的博客： https://blog.csdn.net/lianzhang861/article/details/81745237
PDFObject打开PDF以及案例
06-28
这zip能打开够打开pdf，能够放到tomcat下，使用网络访问，还附有模板，不懂的可以下载
Object-C 2.0.pdf
05-29
是关于Apple操作系统Mac OS 的一种编程语言,适用于初\中级学者.
PDFobject.js
10-26
内部包含了使用js操作pdf的方法，通过对内部文件的导入可以使用js object内部的方法
ASP.NET MVC 利用(aspose+pdfobject.js) 在线预览常用办公文档(word、excel、ppt、pdf)
12-25
在本主题中，我们将探讨如何利用ASP.NET MVC结合aspose和pdfobject.js库来实现在线预览常用的办公文档，包括Word、Excel、PowerPoint和PDF文件。 首先，我们需要了解**aspose**。Aspose是一系列用于处理多种文件...
PDFObject无法加载远程url和不支持IE浏览器解决方案
AN_ERA的博客
02-11 3594
目录 一、PDFObject.js简单使用 二、PDFObject无法加载远程url 问题描述: 解决方案: 三、PDFObject不支持IE(8,9,11)浏览器 问题描述: 解决方案: 一、PDFObject.js简单使用 PDFObject.js可以实现在html页面动态加载pdf, 以实现在页面预览pdf文件的功能; 官网地址:https://pdfobject.co...
PDFObject.js的使用
zt_star的博客
05-27 4931
首先导入PDFObject.js文件，然后在加入下面的代码段 window.onload = function (){   var myPDF = new PDFObject({ url:"这里是pdf的文件地址" }).embed();    }; PDFObject.js可跨域访问文件。
使用pdfobject.js实现在线预览pdf文件
03-30
PDFObject.js是一个轻量级的JavaScript库，用于嵌入PDF文件，并提供了一些有用的选项和方法。使用PDFObject.js实现在线预览PDF文件的步骤如下： 1. 引入PDFObject.js库。可以从官方网站下载最新版本的PDFObject.js库，然后在HTML页面中引入： ```html <script src="path/to/pdfobject.js"></script> ``` 2. 创建一个包含PDF文件的div元素。在HTML页面中创建一个div元素，并设置其ID和class属性： ```html <div id="pdf-container" class="pdfobject-container"></div> ``` 3. 使用PDFObject.js嵌入PDF文件。在JavaScript代码中调用PDFObject.embed()方法，并传入PDF文件的URL和包含PDF文件的div元素的ID： ```javascript PDFObject.embed("path/to/pdf-file.pdf", "#pdf-container"); ``` 4. 配置PDFObject.js选项。PDFObject.js提供了多种选项，可以用于控制嵌入的PDF文件的外观和行为。例如，可以使用以下选项设置PDF文件的高度和宽度： ```javascript PDFObject.embed("path/to/pdf-file.pdf", "#pdf-container", { height: "500px", width: "100%" }); ``` 完整的HTML示例代码如下： ```html <!DOCTYPE html> <html> <head> <title>PDFObject.js Demo</title> <script src="path/to/pdfobject.js"></script> </head> <body> <div id="pdf-container" class="pdfobject-container"></div> <script> PDFObject.embed("path/to/pdf-file.pdf", "#pdf-container", { height: "500px", width: "100%" }); </script> </body> </html> ``` 这样就可以在HTML页面中预览PDF文件了。
评论 36
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值