Which product are you using?
PDfjs Express Plus
PDF.js Express Version
“@pdftron/pdfjs-express”: “^8.7.4”,
Detailed description of issue
I am loading larger size pdf document using the pdf URL. After the completion of loading pdf adding the annotation using the annotationManager.addAnnotation(rectangleAnnotation); annotationManager.redrawAnnotation(rectangleAnnotation); methds. But it’s taking to much time to load PDF.
How can I improve the performance of react app or decrees the pdf loading time ?
It’s showing blank page for some time after loading PDF and also showing blank page for some seconds when I switch page
Does your issue happen with every document, or just one?
with only larger size document.
const handleWebViewer = async () => {
WebViewer(
{
path: '/webviewer/lib',
initialDoc: pdfLink,
streaming: true,
},
viewer.current,
).then((instance: any) => {
console.log("instance", instance)
if (!!instance) {
initializeWebViewer(instance);
}
});
};
useEffect(() => {
// Loading PDF and Annotations
if (pdfLink) {
handleWebViewer()
}
}, [pdfLink]);
const addRectangleAnnotation = async () => {
if (!pdfInstance) return
const { Annotations, annotationManager, documentViewer } = pdfInstance.Core;
const annotations = await annotationManager.getAnnotationsList();
annotationManager.deleteAnnotation(annotations);
const doc = documentViewer.getDocument();
let tempAnnotationsList: any = [];
pdfAnnotationsData?.forEach((annotationData: any) => {
const rectangleAnnotation = new Annotations.RectangleAnnotation();
rectangleAnnotation.PageNumber = Number(annotationData.page);
const pageInfo = doc.getPageInfo(rectangleAnnotation.PageNumber);
const rotation = doc.getPageRotation(rectangleAnnotation.PageNumber);
const rotatedCoordinates = getRotatedCoordinates(annotationData.coordinates, rotation, pageInfo)
if (rotatedCoordinates) {
const [rotatedX1, rotatedY1, rotatedX2, rotatedY2] = rotatedCoordinates;
rectangleAnnotation.X = rotatedX1
rectangleAnnotation.Y = rotatedY1
rectangleAnnotation.Width = rotatedX2 - rotatedX1
rectangleAnnotation.Height = rotatedY2 - rotatedY1
rectangleAnnotation.Author = annotationManager.getCurrentUser();
// Set your custom Data here
rectangleAnnotation.CustomData = {
doorId: annotationData.doorId,
annotationType: annotationData.annotationType,
addedType: 'programmatically'
};
if (annotationData.annotationType === 'Auto') {
// Set Read only annotation if it's detected by AI
rectangleAnnotation.ReadOnly = true;
rectangleAnnotation.StrokeColor = new Annotations.Color(20, 255, 0, 1);
} else if (annotationData.annotationType === 'Manual') {
// Set the stroke color to black (0, 0, 0)
rectangleAnnotation.StrokeColor = new Annotations.Color(252, 186, 3, 1);
} else if (annotationData.annotationType === 'FalseDetected') {
// Set the stroke color to black (0, 0, 0)
rectangleAnnotation.ReadOnly = true;
rectangleAnnotation.StrokeColor = new Annotations.Color(255, 0, 0, 1);
}
// Set the border thickness to 10 (adjust as needed)
rectangleAnnotation.StrokeThickness = 2;
tempAnnotationsList.push(rectangleAnnotation)
annotationManager.addAnnotation(rectangleAnnotation);
annotationManager.redrawAnnotation(rectangleAnnotation);
}
})
setPdfAnnotationsList([...tempAnnotationsList])
};
useEffect(() => {
// Adding annotations on the pdf
if (pdfAnnotationsData && isDocumentLoadedSuccessfully) {
addRectangleAnnotation()
}
}, [pdfAnnotationsData, isDocumentLoadedSuccessfully])