浅谈pdfobject.js实现网页PDF文件浏览

最新推荐文章于 2021-11-18 17:52:55 发布
最新推荐文章于 2021-11-18 17:52:55 发布
阅读量784 收藏
点赞数
分类专栏： java技术

环境

需要使用到pdfobject.js或者压缩后的pdfobject.min.js。

示例源码

<!DOCTYPE html>
<html>
<head>
    <title>网页嵌入pdf浏览器</title>
    <script type="text/javascript" src="./js/pdfobject.min.js"></script>
    <style type="text/css">
        .pdfobject-container { height: 600px;}
        .pdfobject { border: 1px solid #666; }
    </style>
</head>
<body>
<div id="example1"></div>
<script type="text/javascript">
    PDFObject.embed("./pdf/Python程序设计基础.pdf", "#example1");
</script>
</body>
</html>
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

演示效果

这里写图片描述

jimmylsp
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[随记]浅谈pdfobject.js实现网页PDF文件浏览
u010989191的博客
06-25 1万+
环境需要使用到pdfobject.js或者压缩后的pdfobject.min.js。示例源码<!DOCTYPE html> <html> <head> <title>网页嵌入pdf浏览器</title> <script type="text/javascript" src="./js/pdfobject.min.js"></script> <style type="text/
使用pdfobject.js实现在线浏览PDF--后台上传保存文件
snow_love_xia的博客
04-18 1660
今天产品有了一个提了一个新的需求：后台上传PDF文件 因为要的着急，所以老大直接给了我建议：使用PDFObject来实现前端的显示，后台上传文件想必大家都很熟悉了，就是跟上传图片额功能是一样的，完全不用修改 一、后台上传样式 <div class="div div7" style="width: 700px;">上传附件(PDF不得超过100M)：<input type="fil...
使用pdfobject.js实现在线浏览PDF--前端显示PDF
snow_love_xia的博客
04-18 3384
上一篇：使用pdfobject.js实现在线浏览PDF–后台上传保存文件 上一篇分享了后台保存PDF文件的，这一篇就仔细分享前端显示PDF文件的流程， 官网：https://pdfobject.com/ 一、下载js框架 1.1、打开官网：https://pdfobject.com/ 1.2、下载框架 1.3、文件目录 至此第一步下载已经完成 二、部署js框架 2.1、将js复制到你的项目中...
前端js实现预览pdf文件
u012149181的博客
08-19 1万+
今天项目急需在线预览pdf功能，在网上搜了一堆，整合思路如下： 一、采用PDFObeject.js插件，优点:支持pdf输入打开口令，缺点:不支持手机浏览器 其实就光看这个网站也足够了，http://www.pdfobject.com/。 主要代码： &lt;script type="text/JavaScript" src="scripts/pdfobject/pdfobject.js"...
web用pdfobject 对pdf 预览文件
qq_23490959的博客
11-18 1063
网上找了很多 1.jquery.media 我只找到地址指向一个具体pdf文件，没有找到返回文件流的处理，所以pass掉 2.pdf.js 比较专业，但是真的太复杂了 pass pdfobject 这支持指引文件，或者返回文件流两种方式，在这比较简单直接上代码 后台 /** * 预览pdf文件 * 返回文件流 * @param fileName */ @RequestMapping(value = "/getViewTest", method = RequestM
在线pdf预览插件pdfobject.js设置参数使用pdf预览
11-24
PDFObject.js是一款轻量级的JavaScript插件，用于在网页中实现PDF文件的在线预览。这个插件的使用非常简单，只需要几行代码就可以轻松地将PDF文档嵌入到HTML页面中。以下是对PDFObject.js插件设置参数以及如何进行...
PDF显示脚本PDFObject.js
08-28
PDFObject.js是一个轻量级的JavaScript库，专为在网页中嵌入PDF文件而设计。它的主要功能是允许开发者在不依赖任何插件的情况下，在用户的浏览器中无缝展示PDF文档。这个库尤其适用于那些希望在网站上提供PDF阅读...
pdfobject.js
12-20
1. **嵌入PDF文档**：PDFObject.js通过创建一个IFrame元素，并将PDF文件的URL作为其`src`属性来实现PDF的内联显示。这样，用户无需离开当前页面或下载文件，就能直接在网页中预览PDF内容。 2. **跨浏览器支持**：...
pdfobject.js 带教程
08-16
超强html页面渲染pdf文件插件，具体用法参考我的博客： https://blog.csdn.net/lianzhang861/article/details/81745237
在线预览 PDF 文档插件 PDFObject.js
傲凝的博客
09-26 8715
插件描述： 这是一个 JavaScript 库用来在 html 中动态嵌入 PDF 文档，使用 <embed> 标签显示 PDF 文档 官网：https://pdfobject.com/ 使用步骤： 1、下载 pdfobject.js GitHub 下载：https://github.com/pipwerks/PDFObject/ 2、在需要使用的 html 页...
PDFobject.js
10-26
内部包含了使用js操作pdf的方法，通过对内部文件的导入可以使用js object内部的方法
使用pdfobject.js实现在线浏览PDF
热门推荐
蜗牛先生
06-15 3万+
闲来无事，就翻看了一个同学的作品，作品中有一个展示他的简历的页面，简历写在一个PDF中。 然后在页面中直接显示出来了，可以下载，还可以打印，这个技术我还没有尝试过呢。 正好想弄点新鲜玩意儿玩玩，忽然想起前段时间我也收藏过关于这个技术的几篇博客，就把这几篇收藏打开，看看怎么实现这个效果。 ▍特点 1、能自由选择需要浏览的页面 2、从左至右依次为...
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
pdf文件在线预览，兼容多浏览器和手机端
路人也是身边人的博客
11-06 2万+
前言 最近学习了一下网页在线预览pdf文件的实现方式，主要有： PDFObject：使用起来非常方便，电脑端兼容性好，试过能兼容ie9,也很快，但在手机上一些浏览器无法在线. jquery.media.js：使用起来非常方便，不支持ie。ie的话可以提示安装插件实现预览点击下载。不支持手机端。而且要写代码判断ie浏览器以及是否已安装插件，可以百度，都有的。 PDF.js：功能强大，使用起来代码相对...
IText与pdfObject.js在线展示后台生成pdf文件流
qq_35537705的博客
11-09 874
关于使用pdfObject.js与Itext配合展示后台传递的pdf流遇到的坑* 问题汇总 左上角文件名称是如何显示 点击下载的文件名如何动态传递名称 一.前端开发步骤 1.html引入js <script type="text/javascript" src="js/pdfobject.js"></script> 2.css <style type="text/css"> .pdfobject-container { height: 90re
pdfobject.js和pdf.js的详解
Brilliant Me 的博客
12-05 8708
最近的工作中遇到了很多坑，主要是因为最近做的报表，需要展示pdf文件，遇到很多问题，在这里我来一一描述下。 以下是大概遇到的问题描述： 使用的h5的embed标签展示pdf文件。ie那货却必须要装插件才能预览。简直恶心 经理让去掉打印和下载按钮，就是要自己控制浏览器的显示 第一个问题的解决当时再网上查询了这种资料，决定将embed换成 PDFObject.js 然后就在github上下载pdfo
使用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文件了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值