Html embed pdf hide toolbar

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:

Html embed pdf hide toolbar

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 , example:

var url = '';

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

pdfjsLib.GlobalWorkerOptions.workerSrc = '//';

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) {
        pageNumPending = null;

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

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

 * show previous page
function onPrevPage() {
  if (pageNum > 1) {

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

 * show next page
function onNextPage() {
  if (pageNum < pdfDoc.numPages) {

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;

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

Page: /

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.

If you want to embed a PDF document on your website you can use an iFrame. The browser will automatically render a PDF viewer.

Google Chrome, Firefox and Safari accept some parameters to customize the viewer. Add the parameters as part of the url fragment (after the #). Multiple parameters can be separated by &.

<iframe src="/path/to/document.pdf#toolbar=0">iframe>

The following parameters are supported:

toolbar 1, 0 Show or hide the toolbar Chrome
view FitV, FitH, Fit Change the zoom level to fit (vertical, horizontal or both) Chrome
zoom number Set a specific zoom level in % (example: 300) Chrome, FF
page number Set initial position to a specific page (example: 2) Chrome, FF, Safari
nameddest string Set initial position to a named destination (like a heading) Chrome

How do I hide the embedded PDF toolbar?

You can hide the sidebar with #pagemode=none , but not the top bar. To add to the comment @plocks makes above.

How do I disable the toolbar button in PDF?

You cannot disable it, as it's not part of the iframe . You can't control that, since it's a browser feature.

How do I disable the PDF toolbar button in iframe jQuery?

load(function(){ jQuery('#iframe'). contents(). find("#toolbarViewerRight"). hide(); });

How do I embed a PDF in a website and control view toolbar options?

How to embed PDF in website and control view toolbar options?.
Slidebar Button: Use nosidebar=1 to hide Slidebar button..
PageAction Buttons: Use nopageaction=1 to hide PageAction buttons..
ZoomArea Buttons: Use nozoom=1 to hide ZoomArea buttons..
FullScreen Button: Use nofullscreen=1 to hide FullScreen button..