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

這些嵌入方式以及參數官網都是有的，希望大家可以好好使用喲！！！

官網使用手冊地址
官網使用手冊地址
官網使用手冊地址

三、上述就是所有

我這邊瞭解並使用到的也就是這些了，希望對你的瞭解有用喲！！！