Creating your own UI using the core SDK
If you are using the default UI, you rarely have to worry about calling Core functions directly. However, you can choose not to use the provided UIs and create your own from scratch. The example below shows how to load a document in a custom viewer.
View a complete sample hereUsing the DocumentViewer class will give you a scrolling viewer with caching, pre-rendering, optimized zooming, text selection, annotation creation and a number of other features built in.
HTML
First we set up our HTML file. There are two main scripts we need to load:
core/webviewer-core.min.jscore/pdfjs/PDFJSDocumentType.js
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PDF.js Express Custom UI</title>
</head>
<body>
<div id="app">
<div id="scroll-view">
<div id="header">
<button id="rotate">Rotate</button>
<button id="zoom-in">Zoom in</button>
<button id="zoom-out">Zoom out</button>
</div>
<div id="viewer"></div>
</div>
</div>
<!-- Here we load the required files for PDF.js Express -->
<script src="core/webviewer-core.min.js"></script>
<script src="core/pdfjs/PDFJSDocumentType.js"></script>
<!-- Load our own JS here -->
<script src='index.js'></script>
</body>
</html>
index.js
Inside of a Javascript file, add the following code:
// index.js
const viewer = document.getElementById('viewer');
const scrollView = document.getElementById('scroll-view');
/**
* Set the worker path to the static `core` folder
*/
Core.setWorkerPath('/core');
/**
* Replace this with your actual license key
*/
const licenseKey = 'Insert commercial license key here after purchase';
const docViewer = new Core.DocumentViewer();
/**
* Add some global variables for "PDFJSDocumentType.js" to use.
*
* These are normally set by the default UI.
*/
window.documentViewer = docViewer;
window.WebViewer = {};
window.WebViewer['l'] = () => licenseKey
/**
* Set the divs that the viewer will mount to
*/
docViewer.setScrollViewElement(scrollView);
docViewer.setViewerElement(viewer);
/**
* Load your document and enable annotations
*/
docViewer.loadDocument('/pdfjs-express.pdf');
docViewer.setOptions({ enableAnnotations: true });
/**
* Bind events in your UI
*/
document.getElementById('rotate').onclick = () => {
docViewer.rotateClockwise()
}
document.getElementById('zoom-in').onclick = () => {
docViewer.zoomTo(docViewer.getZoom() + 0.25);
}
document.getElementById('zoom-out').onclick = () => {
docViewer.zoomTo(docViewer.getZoom() - 0.25);
}
Deeper integration
Once you have the required assets loads and a basic UI working, you can start interacting with the Core namespace, which is available globally.
Some of the main namespaces and classes that Core exposes are:
See API documentation for the full list.
Feel free to reference our default UI's source code to see how we implement certain functionality using the Core namespace.
