How to disable PDF download tool (icon) on a web / iframe page?

Question

I can upload an entire pdf catalog of 100 pages or more into one page div with iframe.
After loading, I appear in the PDF header an icon for the user to download.

Is there any way to remove this icon?

Thanks in advance.

Answer 1

Not there is assurance that using #toolbar=0 in the URL will work, since this is unique in browsers that use the viewer from Adobe (and maybe Foxit Reader), that is, other viewers maybe do not work with this, as viewers in Macos or Linux browsers.

In most browsers it is possible to change the view, which also probably will not support #toolbar=0, because the viewer is something part of the browser, for example Firefox has its own viewer internally and that does not work with #toolbar=0, see the result of:

<iframe
    src="sample.pdf#toolbar=0"
    width="900"
    height="200"
></iframe>

<br>

<embed type="application/pdf"
    src="sample.pdf#toolbar=0"
    width="900"
    height="200"
>

And even if it works in Firefox as well as in Chrome with extensions it is possible to switch the PDF viewer to anything else that may not support this parameter.

I will summarize in another situation, even if you manage to disappear with all buttons the user who wants will be able to still copy your PDF, or images, this is because everything is downloaded to your computer before rendering, the user can simply press F12 opening the Devtools (Chrome / Firefox), look at the network tab and filter it to get all Pdfs loaded on the current page and by Devtools it will copy the PDF to any folder of it.

There is no way to prevent, it is only possible to hinder. As already seen nor iframe or embed will resolve, I suggest that to make it difficult to download use the PDF.js, how to suggest in this response:

• /a/115789/3635

So you can create your own buttons, navigation and the like and everything will run in <canvas>, example:

var url = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf';

var pdfjsLib = window['pdfjs-dist/build/pdf'];

pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';

var pdfDoc = null,
    pageNum = 1,
    pageRendering = false,
    pageNumPending = null,
    scale = 2,
    canvas = document.getElementById('pdf-exemplo'),
    ctx = canvas.getContext('2d');


function renderPage(num) {
  pageRendering = true;

  pdfDoc.getPage(num).then(function(page) {
    var viewport = page.getViewport({scale: scale});
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    var renderContext = {
      canvasContext: ctx,
      viewport: viewport
    };
    var renderTask = page.render(renderContext);

    renderTask.promise.then(function() {
      pageRendering = false;
      if (pageNumPending !== null) {
        renderPage(pageNumPending);
        pageNumPending = null;
      }
    });
  });

  document.getElementById('page_num').textContent = num;
}


function queueRenderPage(num) {
  if (pageRendering) {
    pageNumPending = num;
  } else {
    renderPage(num);
  }
}

/**
 * mostra a página anterior
 */
function onPrevPage() {
  if (pageNum <= 1) {
    return;
  }
  pageNum--;
  queueRenderPage(pageNum);
}
document.getElementById('prev').addEventListener('click', onPrevPage);

/**
 * mostra a proxima página
 */
function onNextPage() {
  if (pageNum >= pdfDoc.numPages) {
    return;
  }
  pageNum++;
  queueRenderPage(pageNum);
}
document.getElementById('next').addEventListener('click', onNextPage);

/**
 * Download assincrono do PDF.
 */
pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
  pdfDoc = pdfDoc_;
  document.getElementById('page_count').textContent = pdfDoc.numPages;

  renderPage(pageNum);
});

#pdf-exemplo {
    border: 1px solid black;
}

<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>

<div>
  <button id="prev">Proxima página</button>
  <button id="next">Página anterior</button>
  &nbsp; &nbsp;
  <span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
</div>

<canvas id="pdf-exemplo"></canvas>

Note that I used 2.0 for scale of:

scale = 2,

...

var viewport = page.getViewport({scale: scale});

I recommend that you adjust this according to the view-port measurement (you can use window.innerWidth to calculate this or based on the width of the "parent" element, if it is responsive), but also make a minimum measure, so it will be adaptive to different resolutions.

Answer 2

The answer to this question is simple. Use the #toolbar=0 in the src after the file name: src="exemplo.pdf#toolbar=0"