I can't seem to find any resource on disabling annotations. The PDF preview has an extra blank page and after inspecting there's a class for annotations but I would like to have this disabled. Here's what my code looks like
function PDFPreview({ url }) {
const [numPages, setNumPages] = useState(null);
const [pageNumber, setPageNumber] = useState(1);
function onDocumentLoadSuccess({ numPages }) {
setNumPages(numPages);
}
const fileUrl = url;
return (
<Stack>
<Document
file={fileUrl}
onLoadSuccess={onDocumentLoadSuccess}
renderAnnotationLayer={false}
options={{ disableAnnotationRendering: true }}
>
{Array.from(new Array(numPages), (el, index) => (
<Page key={`page_${index + 1}`} pageNumber={index + 1} />
))}
</Document>
<p>
Page {pageNumber} of {numPages}
</p>
</Stack>
);
}
I have tried using the options property as well as passing the property to the Document component but I'm having no luck.
Apparently spending time on the docs made me realize the <Page>
had a boolean property (renderAnnotationLayer
) to disable the annotation layer. Hope this would help anyone who needs it.