Some test text!
There are a few ways to open a document such as from a URL, a blob, the filesystem, or base64 data. Additionally, there are loading options to help WebViewer determine the type of the file being loaded.
If you wish to allow users to open files from their local file system, you can enable this feature with:
WebViewer(...)
.then(instance => {
const { Feature } = instance.UI;
instance.UI.enableFeatures([Feature.FilePicker]);
});
And this option will be available to users in the top-right of the WebViewer UI:
If you have the File object, from a file picker for example, you can pass the object directly to loadDocument function.
<label for="file_upload">Choose A file</label>
<input type="file" id="file_upload" name="file_upload" accept=".pdf">
<div id='viewer' style='width: 1024px; height: 600px;'></div>
<script>
const input = document.getElementById('file_upload');
WebViewer(...)
.then(instance => {
input.addEventListener('change', () => {
// Get the file from the input
const file = input.files[0];
instance.UI.loadDocument(file, { filename: file.name });
});
const { documentViewer } = instance.Core;
documentViewer.addEventListener('documentLoaded', () => {
// perform document operations
});
});
</script>
See more WebViewer events such as documentLoaded
to understand when to execute API operations.
If you run into any issues loading a document, please visit our FAQ.
Get the answers you need: Support
PDFTron SDK
COMPANY