2

Hello I'm trying to display PDF documents with ViewerJS plugin but it doesn't work properly. As documentation says I have <iframe id="viewer" src = "{{URL::to('/')}}/ViewerJS/#../uploads/files/{{$video->source}}" width='100%' height='600' allowfullscreen webkitallowfullscreen></iframe> I have ViewerJS folder in public folder and my pdf files in public/uploads/files folder. When I use this url it shows my page in frame instead of document. Where is a mistake?

1
  • 1
    Dear @Zolax are you find the solution.if then guide me how to open docx/doc file in browser using viewerJS.
    – Raham
    Apr 22, 2016 at 5:59

3 Answers 3

7

Although this is old question, I would like to share how I got that working:

Step 1: Download ViewerJs - http://viewerjs.org/releases/ViewerJS-latest.zip

Step 2: Extract this in public directory of Laravel (I used it with Laravel 4.0)

Step 3: Now, extract another copy in Views folder. That means, you will have ViewerJs library at two locations. One inside public (public/ViewerJs) folder and another will be at (views/ViewerJs)

Step 4: Add below code in your app/routes.php

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

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

Step 5: Now, add any sample PDF file in your public folder (for testing purpose)

Step 6: Open below URL in your browser

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

Please replace example.com (in my case this was localhost/webapp) by your project path and replace demodoc.pdf by name of sample PDF file that you added in public folder.

That's it. This will work fine.

4
  • Is there any simple way to know when document finished loading ? Nov 18, 2015 at 14:45
  • Dear @aquasmit First of all great work.Secondly sir what should I do for docx.I give the link but it shows blank,mean dont show the the text in the docx document.Kindly help me.
    – Raham
    Apr 21, 2016 at 12:13
  • 1
    Thanks @aquasmit, you save my day. Thanks again.
    – Edwin M
    Aug 15, 2018 at 20:11
  • 1
    Thank you @aquasmit
    – Oussama
    Sep 4, 2018 at 18:31
0

You should do as follows:

  1. copy the content of ViewerJS folder e.g in your public/viewerjs

  2. edit PluginLoader.js, ODFViewerPlugin.js, PDFViewerPlugin.js and search for the string ./ and change it to the relative path of the directory, in my example viewer/
    Ex.: in PluginLoader.js, you will find:

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

    replace this to:

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

  3. create a GET route like: Route::get('/ViewerJS/{all?}', array('as' => 'pdfViewer', 'uses' => 'YOURCONTROLLER@pdfViewer'));

  4. create the method in you controller like:

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

  5. Create your the view and paste the entire content of the index.html, it's inside the ViewerJS folder. Don't forget to replace all css and javascript file references with:

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

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

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

  6. Call the route like: http://www.xxxxx.com/ViewerJS#YOUR_PATH_TO_THE_PDF_FILE_UNDER_THE_PUBLIC_FOLDER example: uploads/pdfs/test.pdf
    Note that you don't have to specify public/uploads/pdfs/test.pdf !!

0

You have to add the PDF's name to the path, as well. For example:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.