13

I found the pdf.js project, which is very useful. However, I am unable to figure out how to remove the "Download" option.

4
  • 11
    Whatever user sees in a browser user can download.
    – mishik
    Jul 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.
    – Matheno
    Jul 9, 2013 at 12:20
  • 1
    github.com/andreasgal/pdf.js is older version of github.com/mozilla/pdf.js
    – async5
    Jul 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 Takur
    Nov 30, 2020 at 15:30

9 Answers 9

17

just add this in viewer.css

.download
{
    display:none !important;    
}

.print
{
    display:none !important;
}
1
  • 1
    If 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
13

Just deleting the buttons breaks pdf.js. You need to add a "hidden" class to them (https://github.com/mozilla/pdf.js/issues/2611)

4
  • Brilliant very easy fix!
    – Louwki
    Jan 14, 2015 at 8:13
  • if we are removing these button need to remove the event listener also
    – Vasistan
    Dec 5, 2015 at 7:05
  • 1
    Unfortunately 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.
    – NinjaKC
    Oct 13, 2016 at 23:45
  • How can I download file which is rendered like this, with hidden Print button? Any suggestion? :p
    – Mahesha999
    Oct 30, 2017 at 12:21
8

Here are the steps:

  1. Add jQuery library to shared folder.
  2. Include jQuery library to viewer.html file
  3. Add this on the header section:

    <script>
    $(function(){
        $('#download').hide();
    });
    </script>
    

Done!

5
  • $("#download").style.display = 'none'
    – Perry
    Feb 3, 2016 at 11:48
  • Great! Thanks a lot for this easy snippet.
    – ozeray
    Jan 16, 2017 at 13:34
  • 1
    How can I download file which is rendered like this, with hidden Print button? Any suggestion? :p
    – Mahesha999
    Oct 30, 2017 at 12:21
  • 1
    The same: $("#print").style.display = 'none'
    – karrtojal
    Jun 28, 2018 at 16:40
  • 4
    We can just disable the button and anyone can download the PDF using Ctrl+S Jul 23, 2019 at 9:31
4

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.

10
  • Thanks @Joe Frambach, It worked! My intention is to stop at least average users Jul 11, 2013 at 1:48
  • 1
    It is not working for me. When i remove this download button, Web page does not load the PDF.
    – user1500341
    Dec 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
    Is there a way to stop any user from downloading the file? Jan 22, 2014 at 8:23
  • 1
    This 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
    – Rocstar
    Mar 24, 2021 at 9:15
2

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.

1
  • Perfect Solution, Thanks 4oo4. I even added logic to disable bookmark button
    – Rohutech
    Jun 11, 2020 at 19:20
0

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

-1

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;
}
-1

you may try this https://github.com/latuminggi/pdf.js_readonly

this also prevent user from using shortcut like Ctrl + S or Ctrl + P

2
  • @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 :)
    – iggnimutal
    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
    – camille
    Dec 26, 2021 at 23:15
-1

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;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.