Document Viewer Customizations

Community Driven Extensions Project
tshuba
Posts: 25
Joined: 03 Aug 2009, 15:53

03 May 2018, 15:42

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
Tony Shuba

PrimeFaces 6.1.2 / PrimeFaces Extensions 6.1
NetBeans 8.2
Payara Server 4.1.1.171.1
OmniFaces version 2.6.2
Mojarra 2.2.14

Melloware
Posts: 2291
Joined: 22 Apr 2013, 15:48

03 May 2018, 16:11

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>
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 8.0.3 / PF Extensions 8.0.4

tshuba
Posts: 25
Joined: 03 Aug 2009, 15:53

07 May 2018, 14:56

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

PrimeFaces 6.1.2 / PrimeFaces Extensions 6.1
NetBeans 8.2
Payara Server 4.1.1.171.1
OmniFaces version 2.6.2
Mojarra 2.2.14

Melloware
Posts: 2291
Joined: 22 Apr 2013, 15:48

07 May 2018, 15:00

No problem. I am using the above code in production so hopefully it works for you!
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 8.0.3 / PF Extensions 8.0.4

tshuba
Posts: 25
Joined: 03 Aug 2009, 15:53

07 May 2018, 16:00

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!
Tony Shuba

PrimeFaces 6.1.2 / PrimeFaces Extensions 6.1
NetBeans 8.2
Payara Server 4.1.1.171.1
OmniFaces version 2.6.2
Mojarra 2.2.14

Melloware
Posts: 2291
Joined: 22 Apr 2013, 15:48

07 May 2018, 16:10

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!
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 8.0.3 / PF Extensions 8.0.4

Melloware
Posts: 2291
Joined: 22 Apr 2013, 15:48

22 Nov 2019, 17:32

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;
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 8.0.3 / PF Extensions 8.0.4

GLee
Posts: 18
Joined: 10 Nov 2014, 17:47

13 Jul 2020, 18:50

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
Posts: 2291
Joined: 22 Apr 2013, 15:48

13 Jul 2020, 18:55

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>
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 8.0.3 / PF Extensions 8.0.4

GLee
Posts: 18
Joined: 10 Nov 2014, 17:47

15 Jul 2020, 22:40

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?

Post Reply

Return to “Extensions”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 4 guests