如何在 Laravel 中使用 Viewer js

Question

您好，我正在尝试使用ViewerJS plugin 显示 PDF 文档，但它无法正常工作。正如文档所说，我有<iframe id="viewer" src = "{{URL::to('/')}}/ViewerJS/#../uploads/files/{{$video->source}}" width='100%' height='600' allowfullscreen webkitallowfullscreen></iframe> 我在 public 文件夹中有 ViewerJS 文件夹，在 public/uploads/files 文件夹中有我的 pdf 文件。当我使用这个 url 时，它会在框架而不是文档中显示我的页面。哪里有错？

Answer 1

您还必须将 PDF 的名称添加到路径中。例如：

http://www.xxxxx.com/ViewerJS#YOUR_PATH_TO_THE_PDF_FILE_UNDER_THE_PUBLIC_FOLDER/NAME_FILEP

Answer 2

您应该执行以下操作：

1. 复制 ViewerJS 文件夹的内容，例如在您的 public/viewerjs 中
   

2. 编辑 PluginLoader.js、ODFViewerPlugin.js、PDFViewerPlugin.js 并搜索字符串 ./ 并将其更改为目录的相对路径，在我的示例中 viewer/
   例如：在 PluginLoader.js 中，你会发现：

   loadPlugin('./ODFViewerPlugin', function () { Plugin = ODFViewerPlugin; });

   替换为：

   loadPlugin('viewerjs/ODFViewerPlugin', function () { Plugin = ODFViewerPlugin; });

3. 创建一个 GET 路由，例如：Route::get('/ViewerJS/{all?}', array('as' => 'pdfViewer', 'uses' => 'YOURCONTROLLER@pdfViewer'));

4. 在你的控制器中创建方法，如：

   public function pdfViewer() { return View::make('pdfview.view'); }

5. 创建视图并粘贴 index.html 的全部内容，它位于 ViewerJS 文件夹中。不要忘记将所有 css 和 javascript 文件引用替换为：

   {{ asset('viewerjs/viewer.css') }}

   {{ asset('viewerjs/viewer.js') }}

   {{ asset('viewerjs/PluginLoader.js') }}

6. 像这样调用路由：http://www.xxxxx.com/ViewerJS#YOUR_PATH_TO_THE_PDF_FILE_UNDER_THE_PUBLIC_FOLDER 示例： uploads/pdfs/test.pdf
   注意您不必指定 public/uploads/pdfs/test.pdf !!

Answer 3

虽然这是个老问题，但我想分享一下我是如何做到这一点的：

第 1 步：下载 ViewerJs - http://viewerjs.org/releases/ViewerJS-latest.zip

第 2 步：将其提取到 Laravel 的公共目录中（我在 Laravel 4.0 中使用过）

第 3 步：现在，在 Views 文件夹中提取另一个副本。这意味着，您将在两个位置拥有 ViewerJs 库。一个位于公共 (public/ViewerJs) 文件夹中，另一个位于 (views/ViewerJs)

第 4 步：在您的 app/routes.php 中添加以下代码

//DocumentViewer Library
Route::any('ViewerJS/{all?}', function(){

    return View::make('ViewerJS.index');
});

第 5 步：现在，在您的公共文件夹中添加任何示例 PDF 文件（用于测试目的）

第 6 步：在浏览器中打开以下网址

http://example.com/ViewerJS/index.html#../demodoc.pdf

请用您的项目路径替换 example.com（在我的情况下是 localhost/webapp），并用您在公共文件夹中添加的示例 PDF 文件的名称替换 demodoc.pdf。

就是这样。这样可以正常工作。