Hiding the toolbars surrounding an embedded pdf?

Solution 1:

If you use any browser besides Firefox browser, then the following code will embed a PDF file without any toolbars:

<embed
  src="http://URL_TO_PDF.com/pdf.pdf#toolbar=0&navpanes=0&scrollbar=0"
  width="425" height="425" />

• Please note that this does not work on Firefox
• See the Web Designer's Guide blog post for details.
• See the full list of embedded tag parameters for more information.

Solution 2:

You can use #toolbar to hide above toolbar.. if toolbar =0, it will disable it.. when toolbar=1, this will enable it.. hope so it will work. this works for me

<embed src="filename.pdf#toolbar=0" width="500" height="375"> (Disable toolbar)
<embed src="path/filename.pdf#toolbar=1" width="500" height="375"> (Enable toolbar

Solution 3:

There is no guarantee that using #toolbar=0 in the URL will work, as this is exclusive to browsers that use the Adobe viewer, it may be that other viewers even have similar parameters to maintain compatibility, but certainly not everyone follows that, such as browsers for MacOS browsers or Linux.

In most browsers it is possible to change the view, which also probably will not work with #toolbar=0, because the viewer is something apart from the browser, for example Firefox has its own viewer internally and that does not work with this #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 Chrome with extensions, it is possible to change the PDF viewer to anything else that may not support this parameter.

Even if you can remove all the buttons you want, you can still copy your PDF, or images, because everything is downloaded to your computer before rendering, the user can simply press F12 to open DevTools (Chrome / Firefox), look 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 stop, it is only possible to hinder. As already seen neither "iframe" nor "embed" will solve, I suggest (it's just a suggestion) use PDF.js.

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 = 1.5,
    canvas = document.getElementById('pdf-example'),
    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);
  }
}

/**
 * show previous page
 */
function onPrevPage() {
  if (pageNum > 1) {
    pageNum--;
    queueRenderPage(pageNum);
  }
}

document.getElementById('prev').addEventListener('click', onPrevPage);

/**
 * show next page
 */
function onNextPage() {
  if (pageNum < pdfDoc.numPages) {
    pageNum++;
    queueRenderPage(pageNum);
  }
}

document.getElementById('next').addEventListener('click', onNextPage);

/**
 * PDF async "download".
 */
pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
  //Set loaded PDF to main pdfDoc variable
  pdfDoc = pdfDoc_;

  //Show number of pages in document
  document.getElementById('page_count').textContent = pdfDoc.numPages;

  renderPage(pageNum);
});

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

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

<div>
  <button id="prev">Previous page</button>

  <button id="next">Next page</button>

  <span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
</div>

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

Note that I used 1.5 to scale:

 scale = 1.5,

 ...

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

You can change this as needed. I recommend that you adjust it according to the view-port measurement (you can use window.innerWidth to calculate), but also make a minimum measurement, so it will be adaptive to different resolutions.