利用PdfObject插件实现在线预览pdf文件

最新推荐文章于 2024-04-18 17:10:28 发布
最新推荐文章于 2024-04-18 17:10:28 发布
阅读量3.1k 收藏
点赞数
原文链接：https://blog.csdn.net/qq_20799357/article/details/79714839?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase
版权

插件：PDFObject

下载地址：https://github.com/pipwerks/PDFObject

步骤：

1、引入插件，这里只需要pdfobject.js

<script src="/js/pdfobject.js"></script>

2、新建一个div，作为pdf展示窗口

<div id="example1"></div>

3、定义该div的内容

<script>PDFObject.embed("/pdf/sample-3pp.pdf", "#example1");</script>

4、完成

预览效果：



「已注销」
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
使用pdfobject预览pdf
m0_51431448的博客
01-28 1146
之前写过一篇预览pdf的，，大家按需所用一般项目中在上传文件之前可能会有 先预览一下，看是否符合要求，符合再上传，这里先说了pdf文件，使用pdfobject库，也很方便。
PDFObject在线载入PDF
04-22
在线载入PDF 无标题文档 window.onload = function (){ var success = new PDFObject({ url: "~/pdf/dtix201406-l.pdf" ,pdfOpenParams: { scrollbars: '0', toolbar: '0', statusbar: '0'}}).embed("pdf1"); }; It appears you don't have Adobe Reader or PDF support in this web browser. Click here to download the PDF
PDF在线预览插件：PDFObject web端预览（不支持手机网页预览，手机网页预览见下一篇博客）；
Mr_Van的博客
11-30 2082
电脑网页端实现PDF在线预览插件- -PDFObject1、引入2、HTML中开拓个模块区域3、JS动态载入PDF4、效果图演示 项目相关： version : PDFObject v2.2.7 Vue 、 BootStrap 这段时间再开发一个功能，期中遇到了一个Pdf在线预览的问题，其实电脑网页端预览都是比较简单的，有很多插件可以用，而我用的是PDFObject，比较简单，容易上手，下面来简单介绍下吧！ 博主用的是PDFObject v2.2.7版本的插件，下面提供我的： –PDFObject
使用pdfobject.js实现在线浏览PDF--后台上传保存文件
snow_love_xia的博客
04-18 1685
今天产品有了一个提了一个新的需求：后台上传PDF文件 因为要的着急，所以老大直接给了我建议：使用PDFObject来实现前端的显示，后台上传文件想必大家都很熟悉了，就是跟上传图片额功能是一样的，完全不用修改 一、后台上传样式 <div class="div div7" style="width: 700px;">上传附件(PDF不得超过100M)：<input type="fil...
java正则表达式验证汉字
itmyhome的专栏
12-21 4230
统计指定内容的汉字个数： String str = "北京欢迎你 hello welcome!"; int count=0; Pattern pattern = Pattern.compile("[\u4e00-\u9fa5]"); char c[] = str.toCharArray(); for(int i=0;i<c.length;i++){ Matcher matcher = patt
在线pdf预览插件pdfobject.js设置参数使用pdf预览
11-24
PDFObject.js是一款轻量级的JavaScript插件，用于在网页中实现PDF文件的在线预览。这个插件的使用非常简单，只需要几行代码就可以轻松地将PDF文档嵌入到HTML页面中。以下是对PDFObject.js插件设置参数以及如何进行...
pdfobject插件实现 pdf在线查看
12-20
通过PDFObject，用户可以在浏览器上直接查看PDF文件，提升了用户体验，同时也避免了下载文件可能带来的安全风险。 使用PDFObject实现PDF在线查看的基本步骤如下： 1. **引入PDFObject库**: 首先，你需要在HTML页面...
pdfobject.js浏览器在线预览pdf
07-24
PDFObject.js是一个轻量级的JavaScript库，专门用于在现代Web浏览器中实现PDF文件的在线预览。这个库使得开发者能够在网页上无缝地嵌入PDF文档，无需依赖任何插件或者第三方服务。以下是对PDFObject.js及其应用的...
在idea里使用pdfobject.js实现在线预览pdf文件
03-30
以下是如何在IDEA中使用PDFObject实现在线预览PDF文件的步骤： 1. 下载PDFObject库文件 在PDFObject官网中下载PDFObject.js文件并保存到本地。 2. 在IDEA中创建一个HTML文件 在IDEA中创建一个HTML文件，并在文件...
如何前端实现在线预览pdf、word、xls、ppt等文件
04-27
直接通过页面内嵌iframe可以实现预览pdf文件，这种方法简单易行，但需要注意iframe的宽高设置和浏览器的兼容性问题。 方式四：使用embed标签实现预览 embed标签可以实现pdf预览功能，这个标签h5特性中包含四个属性...
PDFObject打开PDF以及案例
06-28
这zip能打开够打开pdf，能够放到tomcat下，使用网络访问，还附有模板，不懂的可以下载
PDF显示脚本PDFObject.js
08-28
PDFObject 2.0
PDFObject-master2.24.rar
12-16
PDFObject-master2.24.rar PDFObject-master2.24.rar PDFObject-master2.24.rar PDFObject-master2.24.rar PDFObject-master2.24.rar
在线预览PDF（pdfobject）
真皮的博客
10-24 671
JSP在线预览PDF。 引入pdfobject.js。 在csdn的资源里可以搜到 页面内定义一个DIV PDFObject.embed(’<%=basePath%>’+json.url, “#ysjl”); VUE内使用 安装 npm i pdfobject --save 引入 import pdf from ‘pdfobject’ 指定元素 填充 pdf.embed("...
Blazor使用PDFObject预览pdf文件
knownchen的专栏
04-15 1034
Blazor和JavaScript可以互操作，因此可以使用PDFObject预览pdf文件。实现步骤如下： 添加script.js文件，调用PDFObject函数预览后端返回的文件Stream import "./libs/pdfobject.js"; export async function showPdf(id, stream) { const arrayBuffer = await stream.arrayBuffer(); const blob = new Blob([arr
文档在线预览（三）使用js前端实现word、excel、pdf、ppt 在线预览
热门推荐
fhey的博客
05-27 3万+
本文主要介绍了word、excel、pdf、ppt等文件纯前端实现在线预览的方式，从本文的测试情况来看前端实现预览最好的效果还是PDF（或者是图片），不会出现一些文字错乱和乱码的问题，所以一般好的方案就是后端配合将不同格式的文件转换成pdf，转成统一的文件格式，再由前端实现预览效果，这样能保留文件的一些样式的效果，同时前端也只用支持一种文件格式的预览，工作量也能大大降低。
PDFObject - 简单易用的PDF嵌入解决方案
gitblog_00059的博客
03-14 1042
PDFObject - 简单易用的PDF嵌入解决方案 PDFObject 是一个轻量级 JavaScript 库，它允许您在网页中轻松地嵌入 PDF 文件。该项目由 Pipwerks 创建并维护，并且可以免费使用。 项目简介 PDFObject 可以帮助开发者将 PDF 文档无缝集成到他们的网站或应用程序中。只需一行代码，您就可以向页面中添加一个交互式、可缩放的 PDF 预览区域。无需安装任何额外...
PDFObject 预览文件---PDFObject并不是一个PDF渲染工具，它也是通过＜ embed ＞标签实现PDF预览
最新发布
m0_56347363的博客
04-18 709
然后通过 import PDFObject from 'pdfobject';将 PDFObject 导入到页面。下面是一个使用例子。在 Vue 项目中首先通过 npm 安装 PDFObject 插件。不安装包也可以直接引用 PDFObject 的源码。
html5 object嵌入pdf,PDFObject: A JavaScript utility for embedding PDFs
weixin_42512699的博客
06-25 738
1. Create a container to hold your PDF2. Tell PDFObject which PDF to embed, and where to embed itPDFObject.embed("/pdf/sample-3pp.pdf", "#example1");3. You can optionally use CSS to change the appeara...
使用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文件了。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值