javascriptpdfnetpdftron

What should go in a PDFTron custom script?


PDFTron has the option to provide a custom Javascript file to modify the viewer, but I'm not sure what should go in this file, and I can't find any examples on the web.

The website has the following description:

Viewer Options - By default, PWS Cloud documents are loaded in a basic hosted version of WebViewer. You can customize the viewer's appearance, branding and custom features by loading an external JavaScript configuration file.

When I supply this file, window.WebViewerUniversalInstance is null, and document.getElementById('DocumentViewer') returns a null object also.

Can somebody point me in the right direction here, I'm lost.

Thanks


Solution

  • This JavaScript file is run in the context of the viewer's inner html page (ReaderControl.html) allowing you to modify things directly in the viewer so WebViewerUniversalInstance will be null (as that's not in the inner page). However I made a small test file with var ele = document.getElementById('DocumentViewer'); and ele wasn't null so I'm not quite sure why that wasn't working for you.

    Anyway, some examples of things you can do. For custom actions you'll probably want to run your code in the "viewerLoaded" or "documentLoaded" events. For UI changes you shouldn't need to have code in either event.

    So for example if you wanted to hide the print button you could just put in your file:

    $('#printButton').hide();
    

    For modifying UI related things I would recommend right-click, Inspect Element to find the ids/classes of things you want to modify. Alternatively you can download WebViewer and take a look at ReaderControl.html.

    Here's an example of doing something in the viewerLoaded event:

    $(document).on('viewerLoaded', function() {
        readerControl.docViewer.SetMargin(0);
    });
    

    And here's an example of doing something in the documentLoaded event:

    $(document).on('documentLoaded', function() {
        readerControl.setCurrentPageNumber(2);
        readerControl.rotateClockwise();
        readerControl.setZoomLevel(2);
    });
    

    There are many, many more things you could do and you can view the documentation here: http://www.pdftron.com/webviewer/demo/lib/html5/doc/

    Some objects you might be interested in:

    If you have more questions you can always ask on the WebViewer forums: https://groups.google.com/forum/#!forum/pdfnet-webviewer