Document Viewer Customizations

[tshuba]

Hello all,

Can someone provide me with any details, direction or examples on how to make a few small tweaks to the document viewer, for example to set the 'hand tool' ON when the page loads or the ability to say hide the
'download' or 'file open' buttons?

I'm looking directly at the API for PDF.js, but I'm clearly missing something with regard to how it's integrated into PrimeFaces.

Thanks for the time.
- Tony

[Melloware]

Tony, great questions. First because it loads PDF.JS using an iFrame its quite difficult to work with although I use this in Production and it is an awesome component. You have to inject any JS code into the IFRAME.

I had the same requirement to hide buttons so here is what I did....

1. Add this method to your application javascript file.

Code: Select all

/**
* Hides a button on the PDF Viewer toolbar
 */
pdfHideButton : function(button) {
	$('iframe').on('load',
			function() {
				var head = $(this).contents().find('head');
				var css = '<style type="text/css">#' + button	+ '{display:none};</style>';
				$(head).append(css);
			});
}

2. On your page with the PDF Viewer you can do this to hide the OpenFile and BookMark buttons...

Code: Select all

<h:form id="frmRegionalPractices">
			<pe:documentViewer rendered="#{regionalPracticesFileAvailable}" id="pdfRegionalPractices"
				value="#{regionalPracticesFile}" page="#{regionalPractices.pageNumber}" zoom="auto" style="min-height:77vh"
				download="#{regionalPractices.fileName}" />
</h:form>
<script>
$(document).ready(function() {
           pdfHideButton('openFile');
           pdfHideButton('viewBookmark');
});
</script>

[tshuba]

That's great information. I really appreciate the response.

[Melloware]

No problem. I am using the above code in production so hopefully it works for you!

[tshuba]

It's definitely a great start. A lot of our solutions use PDFs. I've been using the document viewer for years, and for the most part, it works very well.

However, some of our applications require PDFs that are CAD drawings with multiple layers and they tend to render slowly with PDF.js. I'm also looking at https://www.pdftron.com/ as a possible solution. It seems to have much better performance and a few features that are pretty cool.

On the Java side, we have used PDFBox and iText to help with the dynamic PDF creation.

If you have another other experience to share, I'd like to hear.

Thanks again!

[Melloware]

Unfortunately besides PDF.js and iText that is the only PDF experience I have. PDFTron looks really nice but its a $$$ product. I like the look of it though!

[Melloware]

A better solution to the above is to do this...

Code: Select all

var pdfViewer = window.frames[0].PDFViewerApplication;
pdfViewer.toolbar.items.openFile.hidden=true;
pdfViewer.toolbar.items.viewBookmark.hidden=true;

[GLee]

Melloware,

I tried your solution for hiding the PDF Viewer OpenFile menu option, and am not having any success.

I'm not that familiar with JS files, but I created a new application.js file under the javascript folder. In my template.xhtml body I added the

Code: Select all

<h:outputScript library="javascript" name="application.js"/>

I added your code as the only item in the application.js file.

Code: Select all

/**
     * Hides a button on the PDF Viewer toolbar
     */
    pdfHideButton : function(button) {
        $('iframe').on('load',
                function () {
                    var head = $(this).contents().find('head');
                    var css = '<style type="text/css">#' + button + '{display:none};</style>';
                    $(head).append(css);
                });
    }

Then in my xhtml file I added the code to the <script> section of my page:

Code: Select all

$(document).ready(function () {
                pdfHideButton('openFile');
                pdfHideButton('viewBookmark');
            });

I already had a $(document).ready(function(){ in my <script> section, so I just placed the two pdfHideButton statements after the first set of statements, that didn't work, so I added another "$(document).ready(function(){" with the two pdfHideButton statements. That didn't work either.

I'm new to this and am obviously doing something wrong, and would appreciate any assistance.

Thanks!

[Melloware]

I found a much nicer way.

Add this to your JS file:

Code: Select all

      pdfHideButtons : function() {
         var pdfViewer = window.frames[0].PDFViewerApplication;
         if (pdfViewer) {
            pdfViewer.toolbar.items.openFile.hidden = true;
            pdfViewer.toolbar.items.viewBookmark.hidden = true;
         }
      }

Then on your XHTML page where you are showing the PDF Viewer add this script.

Code: Select all

<script>
        $(document).ready(function() {
            setTimeout(function(){ pdfHideButtons(); }, 1000);
        });
</script>

[GLee]

Thanks Melloware,

I realized that the Open File is on the Tools menu, and this it does not get hidden with the code. Is there a way to hide that one?