This PDF.js Express sample lets you display and view a PDF document in our Web Viewer (no servers or other external dependencies required). It shows you how to call the Web Viewer constructor to instantiate and load a document. You can load local/remote files of your choice. View demo
WebViewer({
path: '/static/WebViewer/lib/', // make sure your relative path to the WebViewer/lib folder is correct
initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf',
}, document.getElementById('viewer'))
.then((instance) => {
document.getElementById('select').onchange = (e) => {
instance.loadDocument(e.target.value);
};
document.getElementById('file-picker').onchange = (e) => {
const file = e.target.files[0];
if (file) {
instance.loadDocument(file);
}
};
document.getElementById('url-form').onsubmit = (e) => {
e.preventDefault();
instance.loadDocument(document.getElementById('url').value);
};
});
WebViewer({
path: '/static/WebViewer/lib/', // make sure your relative path to the WebViewer/lib folder is correct
initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf',
}, document.getElementById('viewer'))
.then((instance) => {
document.getElementById('select').onchange = (e) => {
instance.UI.loadDocument(e.target.value);
};
document.getElementById('file-picker').onchange = (e) => {
const file = e.target.files[0];
if (file) {
instance.UI.loadDocument(file);
}
};
document.getElementById('url-form').onsubmit = (e) => {
e.preventDefault();
instance.UI.loadDocument(document.getElementById('url').value);
};
});
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="../../style.css">
<script src="/static/WebViewer/lib/webviewer.min.js"></script>
<script src='../../old-browser-checker.js'></script>
</head>
<body>
<header>
<div className="title sample">Viewing sample</div>
</header>
<aside>
<h1>Controls</h1>
<h2>Choose a file to view</h2>
<select id="select" style={{"width":"100%"}}>
<option value="https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf">https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf</option>
<option value="https://pdftron.s3.amazonaws.com/downloads/pl/report.docx">https://pdftron.s3.amazonaws.com/downloads/pl/report.docx</option>
<option value="https://pdftron.s3.amazonaws.com/downloads/pl/presentation.pptx">https://pdftron.s3.amazonaws.com/downloads/pl/presentation.pptx</option>
<option value="../../../samples/files/demo-annotated.pdf">../../../samples/files/demo-annotated.pdf</option>
<option value="../../../samples/files/encrypted-foobar12.pdf">../../../samples/files/encrypted-foobar12.pdf</option>
</select>
<h2>Or pass a url to a document</h2>
<form id="url-form">
<input id="url" type="text" style={{"width":"100%"}} />
<input type="submit" value="Submit">
</form>
<h2>Or choose your own</h2>
<input id="file-picker" type="file" accept=".pdf,.jpg,.jpeg,.png,.docx,.xlsx,.pptx,.md" />
<hr />
<h1>Instructions</h1>
<p>Use the dropdown above to view local or remote documents. Out of the box, PDF.js Express WebViewer client only can load only PDF files</p>
</aside>
<div id="viewer"></div>
<script src="../../menu-button.js"></script>
<script src="viewing.js"></script>
</body>
</html>
