Some test text!
Page thumbnails are rendered image representations of the page they are generated from.
The SDK API has the flexibility to alter the resolution or size of the thumbnail output and whether to include annotations or not.
To create a basic PDF page thumbnail where the result is a HTMLCanvasElement or HTMLImageElement.
WebViewer(...)
.then(instance => {
const { documentViewer } = instance.Core;
documentViewer.addEventListener('documentLoaded', () => {
const doc = documentViewer.getDocument();
const pageNum = 1;
doc.loadThumbnailAsync(pageNum, (thumbnail) => {
// thumbnail is a HTMLCanvasElement or HTMLImageElement
console.log(thumbnail);
});
});
});
To create a high resolution page thumnbails and optionally with annotations where the result is a HTMLCanvasElement or HTMLImageElement.
WebViewer(...)
.then(instance => {
const { documentViewer } = instance.Core;
documentViewer.addEventListener('annotationsLoaded', () => {
const doc = documentViewer.getDocument();
const pageNumber = 1;
doc.loadCanvasAsync(({
pageNumber,
zoom: 2, // render at twice the resolution
drawComplete: async (thumbnail) => {
// optionally comment out "drawAnnotations" below to exclude annotations
await instance.Core.documentViewer.getAnnotationManager().drawAnnotations(pageNumber, thumbnail);
// thumbnail is a HTMLCanvasElement or HTMLImageElement
console.log(thumbnail);
}
}));
});
});
Get the answers you need: Support
PDFTron SDK
COMPANY