How to make PDF undownloadable using pdf.js

Question

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

Answer 1

just add this in viewer.css

.download
{
    display:none !important;    
}

.print
{
    display:none !important;
}

Answer 2

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.

Answer 3

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

Answer 4

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.

Answer 5

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!

Answer 6

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