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:
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 = '//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;
}
Previous page
Next page
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 &
.
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 |