I found the pdf.js project, which is very useful. However, I am unable to figure out how to remove the "Download" option.
-
11Whatever user sees in a browser user can download.– mishikJul 9, 2013 at 12:19
-
Can you give us the code? I'm not interested in downloading the content from the website just to check it out for you.– MathenoJul 9, 2013 at 12:20
-
1github.com/andreasgal/pdf.js is older version of github.com/mozilla/pdf.js– async5Jul 10, 2013 at 1:42
-
1@mishik can we download the content of src? <video class="video-responsive bg-dark" autoplay="" poster="/s/videos/5f6b72f30cf2d09aa32cb6d9/cover" src="blob:durgasoftonline.com/…>– Ajay TakurNov 30, 2020 at 15:30
9 Answers
just add this in viewer.css
.download
{
display:none !important;
}
.print
{
display:none !important;
}
-
1If just hiding the buttons, this should be the answer.. I don't understand why most developers are nowadays using a js or jquery fix to solve a CSS problem! +1 to this answer! Oct 14, 2019 at 11:08
Just deleting the buttons breaks pdf.js. You need to add a "hidden" class to them (https://github.com/mozilla/pdf.js/issues/2611)
-
-
if we are removing these button need to remove the event listener also– VasistanDec 5, 2015 at 7:05
-
1Unfortunately everywhere I can find says "just add hidden class to buttons you want hidden", yet it seems this does not work [on many of the buttons, such as open] in newer versions of pdf.js and no issue reports regarding it. Would have been nice if they just did a check in the JS for the existing element before trying to attach code to it.. allowing the html to be freely adjusted without headaches.– NinjaKCOct 13, 2016 at 23:45
-
How can I download file which is rendered like this, with hidden Print button? Any suggestion? :p Oct 30, 2017 at 12:21
Here are the steps:
- Add jQuery library to shared folder.
- Include jQuery library to viewer.html file
Add this on the header section:
<script> $(function(){ $('#download').hide(); }); </script>
Done!
-
-
-
1How can I download file which is rendered like this, with hidden Print button? Any suggestion? :p Oct 30, 2017 at 12:21
-
1
-
4We can just disable the button and anyone can download the PDF using Ctrl+S Jul 23, 2019 at 9:31
Modify the source. Line 85 of web/viewer.html.
https://github.com/andreasgal/pdf.js/blob/master/web/viewer.html#L85
Just remove the button.
<button id="download" title="Download" onclick="PDFView.download();" oncontextmenu="return false;">
<img src="images/download.svg" align="top" height="16"/>
Download
</button>
This won't completely stop experienced and eager users from downloading it. You can never stop that. But this is enough to raise the bar enough for the curious.
-
Thanks @Joe Frambach, It worked! My intention is to stop at least average users Jul 11, 2013 at 1:48
-
1It is not working for me. When i remove this download button, Web page does not load the PDF.– user1500341Dec 23, 2013 at 21:22
-
@VivekSancheti Are you removing the entire download button element? The element spans lines 85-86-87-88. Dec 23, 2013 at 22:48
-
1
-
1This solution don't work
secondary_toolbar.js:220 Uncaught (in promise) TypeError: Cannot read property 'addEventListener' of null at SecondaryToolbar._bindClickListeners (secondary_toolbar.js:220) at new SecondaryToolbar (secondary_toolbar.js:58) at Object._initializeViewerComponents (app.js:483) at Object.initialize (app.js:246) _bindClickListeners @ secondary_toolbar.js:220 SecondaryToolbar @ secondary_toolbar.js:58 _initializeViewerComponents @ app.js:483 initialize @ app.js:246 Promise.then (async) run @ app.js:539 webViewerLoad @ viewer.js:232
– RocstarMar 24, 2021 at 9:15
Another way to do it actually looks to be using pdf.customise.js
(a WordPress plugin that comes bundled with it does it this way). I did this to remove the openFile button.
First, in viewer.html
, add this:
<script src="pdf.customise.js"></script>
Then, make your pdf.customise.js
like so:
(function($) {
$(document).ready(function() {
var params = window.location.search.substring(1).split("&");
var disabledownload = false;
var disableprint = false;
var disabletext = false;
var disabledoc = false;
var disableopen = true;
for (var i = 0; i < params.length; i++) {
var value = params[i].split("=");
if (value && value.length == 2)
if (value[0] == "disabledownload" && value[1] == 1) disabledownload = 1;
else if (value[0] == "disableprint" && value[1] == 1) disableprint = 1;
else if (value[0] == "disabletext" && value[1] == 1) disabletext = 1;
else if (value[0] == "disabledoc" && value[1] ==
1) disabledoc = 1
}
var extracss = "";
if (disabledownload) extracss += " .download {display:none!important;}";
if (disableprint) extracss += " .print {display:none!important;}";
if (disabletext) extracss += " .textLayer {-webkit-touch-callout: none !important; -webkit-user-select: none !important; -khtml-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; user-select: none !important;} .selectTool { display: none !important;}";
if (disabledoc) extracss += " #documentProperties {display:none !important;}";
if (disableopen) extracss += " #openFile { display:none!important;}";
if (disableopen) extracss += " #secondaryOpenFile { display:none!important;}";
if (extracss) {
var style = document.createElement("style");
style.type = "text/css";
style.innerHTML = extracss;
document.getElementsByTagName("head")[0].appendChild(style)
}
$(document).bind("pagerendered", function(e) {
if (disabledownload) $(".download").remove();
if (disableprint) $(".print").remove();
if (disableopen) $("#openFile").remove();
if (disableopen) $("#secondaryOpenFile").remove();
if (disabletext) {
$(".selectTool").remove();
$(".textLayer").remove();
if (PDFViewerApplication) PDFViewerApplication.pdfCursorTools.switchTool(1)
}
if (disabledoc) {
$(".documentProperties").prev(".horizontalToolbarSeparator").remove();
$(".documentProperties").remove()
}
})
})
})(jQuery);
I don't like that this uses jQuery instead of pure javascript (however it could be easily rewritten that way), but still works really well.
-
Perfect Solution, Thanks 4oo4. I even added logic to disable bookmark button– RohutechJun 11, 2020 at 19:20
The simplest method is to add hidden
class to the specific button in the toolbar (download button in this case)
PDF.JS has hidden class included by default in its CSS file. So just add a hidden
class to the button which has the id download
and secondaryDownload
Add this to viewer.css:
To hide download icon:
.toolbarButton.download {
display: none;
}
To hide printer icon...
.toolbarButton.download {
display: none;
}
For both...
.toolbarButton.download, .toolbarButton.print {
display: none;
}
you may try this https://github.com/latuminggi/pdf.js_readonly
this also prevent user from using shortcut like Ctrl + S or Ctrl + P
-
@KJ what browser do u use? anyway sometimes developers need to protect its pdf source file such as disable direct access (tool like IDM can sniff ".pdf"), or never reveal its original file name and .pdf extension, or encode pdf to base64 first, more documentation on PDF.js homepage, even nothing is secure but hardening the code is part of the job of developers themselves, cmiiw :) Dec 24, 2021 at 15:27
-
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review– camilleDec 26, 2021 at 23:15
In viewer.js find download() and put return false; at the very top. If you also want to disable printing, do the same for beforePrint(), afterPrint() and performPrint().
Then you can hide the buttons using css, among other ways.
Viewer.js
async download() {
return false;
}
beforePrint() {
return false;
}
afterPrint() {
return false;
}
performPrint() {
return false;
}