3 de julho de 2024 - Frederico Marinho
Abrir arquivo PDF no corpo da página HTML sem download
Recentemente, enfrentamos um desafio no projeto de criação de um site com acesso restrito, a chamada “Área do Cliente”. Nessa Área do Cliente, os clientes teriam acesso a documentos em PDF protegidos por senha. Esses documentos precisavam ser bloqueados para impedir a possibilidade de downloads.
Resolvemos utilizando uma biblioteca específica para renderização de PDFs, chamada PDF.js.
Para nossa própria consulta futura e de quem se interessar, segue o código:
<!DOCTYPE html>
<html>
<head>
<title>PDF Viewer</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf_viewer.min.css">
<style>
body {
margin: 0;
overflow: hidden;
}
#viewerContainer {
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
overflow: auto;
}
.pdfViewer {
width: 100%;
height: 100%;
}
.hidden-toolbar .pdfViewer .toolbar {
display: none !important;
}
</style>
</head>
<body>
<div id="viewerContainer" class="hidden-toolbar">
<div id="viewer" class="pdfViewer"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf_viewer.min.js"></script>
<script>
var url = 'arquivo.pdf';
var loadingTask = pdfjsLib.getDocument(url);
loadingTask.promise.then(function(pdf) {
var container = document.getElementById('viewerContainer');
var eventBus = new pdfjsViewer.EventBus();
var pdfViewer = new pdfjsViewer.PDFViewer({
container: container,
eventBus: eventBus
});
pdfViewer.setDocument(pdf);
}, function (reason) {
console.error(reason);
});
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
});
</script>
</body>
</html>
Deixe um comentário