使用pdfobject.js实现在线浏览PDF--前端显示PDF

上一篇：使用pdfobject.js实现在线浏览PDF–后台上传保存文件

上一篇分享了后台保存PDF文件的，这一篇就仔细分享前端显示PDF文件的流程，

官网：https://pdfobject.com/

一、下载js框架

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

1.2、下载框架

1.3、文件目录

至此第一步下载已经完成

二、部署js框架

2.1、将js复制到你的项目中

这一步很简单，就是把下载的文件中pdfobject.min.js复制到你的项目中，这样就OK了

2.2、在你的项目中引入pdfobject.min.js文件

这一步就是像你引入其他样式js一样，直接引入这个文件就好，

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

2.3、直接显示PDF文件

在页面中：在你要显示PDF文件的地方引入下面的代码就好

@if($oData->filetype == 'pdf')<div id="example1" ></div><script type="text/javascript" src="/assets/js/pdf/pdfobject.min.js"></script><script>var options = {pdfOpenParams: { view: 'FitV'}};// 我的pdf文件放在项目的pdf文件夹下PDFObject.embed("/{{$oData->filepath}}", "#example1",options);</script>@endif

很显然，根据官网的手册可以看到，我的这种显示方式就是把pdf文件显示嵌入尺寸的容器中，结果如下：

这些嵌入方式以及参数官网都是有的，希望大家可以好好使用哟！！！

官网使用手册地址
官网使用手册地址
官网使用手册地址

三、上述就是所有

我这边了解并使用到的也就是这些了，希望对你的了解有用哟！！！

使用pdfobject.js实现在线浏览PDF--前端显示PDF相关推荐

前端使用pdf.js插件在线浏览pdf
vue中使用PDF.js_没理由的花呗的博客-CSDN博客_pdf.js vue 步骤 1.官网下载pdf.js插件放入一个公用方法文件夹中如utils 2.在需要使用的页面使用iframe标签 &l ...
基于ASP.NET MVC 利用(Aspose+Pdfobject.js) 实现在线预览Word、Excel、PPT、PDF文件
详细链接:https://shop499704308.taobao.com/?spm=a1z38n.10677092.card.11.594c1debsAGeak VS2010版本以及以上版本源码下载 ...
期刊《软件学报》已提供免费在线浏览，格式为PDF。
上周末和GF去上图查阅资料,发现<软件学报>这本学术味较浓的期刊不错. 而且更意外得发现软件学报的官方网站已将从2002年第1期开始,各期的文章都放在网页上,提供免费浏览,格式为PDF. ...
linux下pdf中文显示,PDF中文显示
出自Linux Wiki Linux中阅读PDF时中文显示不正常的原因主要有二:一是系统字体配置有问题,二是没有安装相应的中文字体.本文将分别介绍解决方案,只要依次按说明操作,Evince.Okula ...
h5在线浏览word_怎样将PDF在线转换成Word？教你成为一个高手的方法
在我们的日常生活工作学习中,是很需要的Office办公软件的.不过我们经常使用的还是PDF格式的文件.但是如果我们想在PDF文件上再编辑文字时,就要把PDF转换成Word格式再编辑.在线PDF转换成W ...
使用viewer.js实现在线浏览Office文档
1.跟其他js组件不同,这个必须放在web服务器中才会有效果. 2.支持.odp(ppt,pptx),ops (xls,xlsx), pdf 3. odp vs ppt 主要不同 odp 不支持艺术字 ...
WEB中使用viewer.js实现在线浏览Office文档
1.如何使用ViewerJS 把ViewerJS放在你的网站很容易,花费的时间不会超过5分钟.ViewerJS是一个非常通用的文档查看器,驻留在您的web服务器本身. 运行ViewerJS一样简单的做 ...
网站开发之ie下在线浏览pdf文件无需本地支持
1.首先,务必通过后面给的链接了解一些可实现的方法:打开链接. 2.个人选择了PDFObject+PDF.js来实现,这里需要下载pdfobject.js和PDF.js.对于pdfobject.js, ...
在线浏览ipynb文件
前言我又接到奇奇怪怪的需求了,要求在线浏览ipynb,但我学的是Java,我之前连python都没接触过,甚至对这个文件格式都要先百度一下就很烦,但为了工资还是要继续的对吧. 首先讲一下我的思路,我 ...
前端显示文本时的格式设置
有时,前端页面文字内容需要按照我们输入的格式显示,比如,我们输入换行.空格,这些在文字显示时都需要显示出来.这里有一个较为简单的解决方式前端显示界面: 代码: <div class=" ...