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

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

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

三、上述就是所有

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