Skip to content

Instantly share code, notes, and snippets.

@kyletimmermans

kyletimmermans/PDFjs-Template.html

Last active November 17, 2024 00:55
Show Gist options
  • Save kyletimmermans/0ae64886d9a5a76146c48ada91600366 to your computer and use it in GitHub Desktop.
Save kyletimmermans/0ae64886d9a5a76146c48ada91600366 to your computer and use it in GitHub Desktop.
Download ZIP
A template for embedding a PDF into a webpage using PDF.js - Equipped with all the settings needed to maximize PDF display quality and enable selectable text/clickable links
Raw
PDFjs-Template.html
<!DOCTYPE html>
<html dir="ltr" translate="no">
<head>
<title>PDF.js Viewer Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<!-- Necessary imports for PDF.js-->
<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.8.69/pdf_viewer.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.8.69/pdf.min.mjs" type="module"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.8.69/pdf_viewer.mjs" type="module"></script>
</head>
<style>
/* Outward-most container of a PDF.js viewer must be display: relative */
#container { display: relative; }
/* The direct parent above that actually contains the PDF.js viewer must be display: absolute */
#viewerContainer {
position: absolute;
right: 0;
left: 0;
top: 0;
}
/* Page shadowing and separation styling */
.page {
box-shadow: 0 0 8px #bbb;
box-sizing: content-box;
margin-bottom: 15px !important;
margin-top: 15px !important;
}
/* Dynamic height resizing for varying PDF heights */
#viewerResize { height: var(--viewer-container-height); }
/* Remove yellow highlighting when hovering over links */
.annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton):not(.hasBorder) > a:hover {
opacity: 0 !important;
}
</style>
<body>
<div id="container">
<div id="viewerResize">
<div id="viewerContainer">
<div id="viewer" class="pdfViewer"></div>
</div>
</div>
</div>
<script type="module">
pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.8.69/pdf.worker.min.mjs";
const container = document.getElementById("viewerContainer");
const eventBus = new pdfjsViewer.EventBus();
const pdfLinkService = new pdfjsViewer.PDFLinkService({
eventBus,
externalLinkTarget: 2, // 'BLANK' - Open links in new tab (Default link rel is "noopener noreferrer nofollow")
});
// PDF viewer settings for maximum quality
const pdfViewer = new pdfjsViewer.PDFViewer({
container,
eventBus,
linkService: pdfLinkService,
enableScripting: false,
// Uncomment if you have forms in your PDF
//renderInteractiveForms: false,
maxCanvasPixels: -1, // -1 means no limit
printResolution: 300,
scale: 1.0,
enableHWA: true,
});
pdfLinkService.setViewer(pdfViewer);
eventBus.on("pagesinit", function () {
pdfViewer.currentScaleValue = "page-width";
// Continually resize the viewer element if the page dimensions change
const viewerResizer = document.getElementById('viewer');
const resizeObserver = new ResizeObserver(entries => {
pdfViewer.currentScaleValue = "page-width";
});
resizeObserver.observe(viewerResizer);
});
// Loading document.
const loadingTask = pdfjsLib.getDocument({
url: "/your-pdf-here.pdf", // Put the path/URL to your PDF, here
textLayerMode: 2,
isEvalSupported: false,
enableXfa: false, // Change to true if your PDF uses XFA forms
/* Uncomment if your PDF needs cmaps (cdnjs.com cdn does not have /cmaps/)
cMapUrl: "https://cdn.jsdelivr.net/npm/pdfjs-dist@4.8.69/cmaps/",
cMapPacked: true,*/
});
const pdfDocument = await loadingTask.promise;
pdfViewer.setDocument(pdfDocument);
pdfLinkService.setDocument(pdfDocument, null);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment