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

最新推荐文章于 2024-10-19 13:22:40 发布

ignativs amor

最新推荐文章于 2024-10-19 13:22:40 发布

阅读量3.4k

点赞数

分类专栏： PHP 文章标签： pdfobject pdfobject.js 前端显示pdf文件 pdfobject实现pdf文件显示

本文链接：https://blog.csdn.net/snow_love_xia/article/details/89380125

版权

PHP 专栏收录该内容

26 篇文章 2 订阅

订阅专栏

上一篇：使用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文件显示嵌入尺寸的容器中，结果如下：

在这里插入图片描述