Comment on page
Embedding a pdf preventing the user from downloading it
How to embed a pdf and prevent the user from downloading it.
1 Add the following scripts to the Page HTML Header:
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.9.179/pdf.min.js" integrity="sha512-9jr6up7aOKJkN7JmtsxSdU+QibDjV6m6gL+I76JdpX1qQy8Y5nxAWVjvKMaBkETDC3TP3V2zvIk+zG7734WqPA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
// Initialize the PDF viewer
function showPDF(pdfUrl, containerId, prevBtnId, nextBtnId, pageIndicatorId) {
const container = document.getElementById(containerId);
const prevPageBtn = document.getElementById(prevBtnId);
const nextPageBtn = document.getElementById(nextBtnId);
const pageIndicator = document.getElementById(pageIndicatorId);
let currentPage = 1;
// Create a canvas element to render the PDF page
const canvas = document.createElement('canvas');
container.appendChild(canvas);
const loadingTask = pdfjsLib.getDocument(pdfUrl);
loadingTask.promise.then(pdf => {
const numPages = pdf.numPages;
PDFViewer = pdf;
// Display the initial page
displayPage(PDFViewer, currentPage);
// Add event listeners to the control buttons
prevPageBtn.addEventListener('click', () => {
if (currentPage > 1) {
currentPage--;
displayPage(PDFViewer, currentPage);
}
});
nextPageBtn.addEventListener('click', () => {
if (currentPage < numPages) {
currentPage++;
displayPage(PDFViewer, currentPage);
}
});
// Function to display a specific page
function displayPage(PDFViewer, pageNumber) {
// Update the control buttons based on the current page
prevPageBtn.disabled = (pageNumber === 1);
nextPageBtn.disabled = (pageNumber === numPages);
// Update the page indicator
pageIndicator.textContent = `${pageNumber} / ${numPages}`;
// Get the requested page
PDFViewer.getPage(pageNumber).then(page => {
// Set the desired scale for the PDF rendering
var desiredScale = 5;
// Set viewport according to the desired scale
var viewport = page.getViewport({ scale: desiredScale });
canvas.width = viewport.width;
canvas.height = viewport.height;
canvas.style.width = '100%';
canvas.style.height = '100%';
// Render the PDF page into the canvas using the viewport
var renderContext = {
canvasContext: canvas.getContext('2d'),
viewport: viewport,
};
var renderTask = page.render(renderContext);
renderTask.promise.then(task => {
//console.log('Page rendered');
});
});
}
});
}
// Destroy the PDF viewer and clear the container
function clearPDF(container) {
if (PDFViewer) {
PDFViewer.destroy();
var element = document.getElementById(container);
while (element.firstChild) {
element.removeChild(element.firstChild);
}
}
}
</script>
2 Create an HTML element with the following content:
<div id="controls">
<button id="prev-page">Previous</button>
<span id="page-indicator"></span>
<button id="next-page">Next</button>
</div>
<div id="pdf-container"></div>
3 Add the following code to render the pdf inside the html in a Run Javascript action, to be triggered whenever you want to show the pdf:
showPDF(
'https://url/to/file.pdf',
'pdf-container',
'prev-page',
'next-page',
'page-indicator'
);
Remember to replace https://url/to/file.pdf with the full path to the pdf you want to show (this would probably be dynamic).
4 Add the following code to clear the pdf viewer inside the html in a Run Javascript action:
clearPDF('pdf-container');
The pdf viewer should be cleared prior to loading another pdf. If the viewer is displayed in a popup, it's best to run this action when the popup is closed. If it's being displayed in a sub-group of a dashboard page, clear the viewer when navigating to a different tab. If your implementation requires a different approach you can clear the viewer immediately before loading a new document, but the clear action must complete before starting to load a new document.
If you need to display more than one instance of the pdf viewer on the same page, you will need to make sure you use unique element id's in your HTML. Be sure to reference those unique values when running the
showPDF action in step 3, and reference the unique pdf-container id when running the clearPDF action in step 4.
Example for a second viewer:
<div id="controls-2">
<button id="prev-page-2">Previous</button>
<span id="page-indicator-2"></span>
<button id="next-page-2">Next</button>
</div>
<div id="pdf-container-2"></div>
Please, be aware that once the pdf is in the user computer, the user could access it if he/she is tech savvy, but with the method provided here we remove the use of the contextual menu so it's not possible to directly download the file.
Last modified 2mo ago