Use viewer.js plugin in symfony2

1
votes

I need help to install http://viewerjs.org plugin to view pfd files in Symfony2. That plugin contains css/js files and images with its own folder structure.

This is what I have done:

  1. Copy all js files to AcmeBundle/Resources/public/js

  2. Copy all css files to AcmeBundle/Resources/public/css

  3. Copy images folder (which originally was into css folder in the plugin) to AcmeBundle/Resources/public/images

  4. Change url(images/xxxx) functions of css files to url(../images/xxxx)

  5. Install assets: php app/console assets:install web

  6. Include the following code to the view I want to use viewer.js.

    <link rel= "stylesheet" type="text/css" href="{{ asset('bundles/acme/css/viewer.css') }}" />
<script src= "{{ asset('bundles/acme/js/PluginLoader.js') }}" type="text/javascript"></script>
<script src= "{{ asset('bundles/acme/js/viewer.js') }}" type="text/javascript"></script>
<iframe id="viewer" src="{{ asset('bundles/acme/js/viewer.js') }}/#../uploads/1.pdf" width='400' height='300' allowfullscreen webkitallowfullscreen></iframe>

"1.pdf" file is in /web/uploads/ folder.

When I load the view, I get in the place of the iframe element:

Not Found

The requested URL /bundles/acme/js/viewer.js/ was not found on this server.

1
javascriptcsssymfonytwig

1 Answers

3
votes

This isn`t how Viewer.JS works.

You can't display bundles/acme/js/viewer.js/ as source of iframe becouse index.html in Viewer.js is file that should be displayed as source.

  1. Download Viewer.js And extract it to AcmeBundle/Resources/public/ so you should have AcmeBundle/Resources/public/Viewer.js/ dir with all files from zip

  2. run php app/console assets:install web

  3. Put in your twig view: 

    <iframe id="viewer" src="{{ asset('bundles/acme/Viewer.js/index.html') }}#{{ asset('uploads/1.pdf') }}" width='400' height='300' allowfullscreen webkitallowfullscreen></iframe>

You don't need to put scripts and styles because they are load in Viewer.js/index.html that is viewer