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
Document Viewer Customizations
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.
2. On your page with the PDF Viewer you can do this to hide the OpenFile and BookMark buttons...
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);
});
}
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 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1
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 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1
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!
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
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
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 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1
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 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1
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
I added your code as the only item in the application.js file.
Then in my xhtml file I added the code to the <script> section of my page:
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!
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"/>
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);
});
}
Code: Select all
$(document).ready(function () {
pdfHideButton('openFile');
pdfHideButton('viewBookmark');
});
I'm new to this and am obviously doing something wrong, and would appreciate any assistance.
Thanks!
I found a much nicer way.
Add this to your JS file:
Then on your XHTML page where you are showing the PDF Viewer add this script.
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;
}
}
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 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1
-
- Information
-
Who is online
Users browsing this forum: No registered users and 6 guests