How to refresh the pdf viewer after creating an annotation by PDFNet API?

Technical Support WebViewer
,
1

Hello! How to refresh the pdf viewer after creating an annotation by PDFNet API?

    await window.Core.PDFNet.runWithCleanup(async () => {
        const doc = await documentViewer.getDocument().getPDFDoc();
        const PDFNet = window.Core.PDFNet;
        const line = await PDFNet.LineAnnot.create(doc, new PDFNet.Rect(10, 400, 200, 600));
        await line.setStartPoint(new PDFNet.Point(25, 426));
        await line.setEndPoint(new PDFNet.Point(180, 555));
        const blueColorPt = await PDFNet.ColorPt.init(0, 0, 1, 0);
        await line.setColor(blueColorPt, 3);
        const page = await doc.getPage(pageNumber);
        await page.annotPushBack(line);
    }, licenseKey)

    documentViewer.refreshPage(pageNumber);
    documentViewer.updateView([pageNumber]);

The line does not appear on the page, what should i do?

2

Hello 1310748076

Thank you for reaching out!
That code worked for me, are you seeing any error?
Can you provide more information into whats not working? or a sample project?

Best regards,
Tyler

3

Hello

This is my test sample:

export const MyComponent = () => {
  const viewer = useRef(null);

  useEffect(() => {
    WebViewer(
      {
        path: pdfLib,
        licenseKey: licenseKey,
        initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf',
        fullAPI: true,
      },
      viewer.current!,
    ).then((instance) => {
      const { documentViewer } = instance.Core;

      // mouseLeftUp documentLoaded
      documentViewer.addEventListener('mouseLeftUp', () => {
        const pageNumber = 2;
        instance.Core.PDFNet.runWithCleanup(async () => {
          const doc = await documentViewer.getDocument().getPDFDoc();
          const PDFNet = instance.Core.PDFNet;
          const line = await PDFNet.LineAnnot.create(doc, new PDFNet.Rect(10, 400, 200, 600));
          await line.setStartPoint(new PDFNet.Point(25, 426));
          await line.setEndPoint(new PDFNet.Point(180, 555));
          const blueColorPt = await PDFNet.ColorPt.init(0, 0, 1, 0);
          await line.setColor(blueColorPt, 3);
          const page = await doc.getPage(pageNumber);
          await page.annotPushBack(line);
        }, licenseKey).then(() => {
          console.log('success')
          documentViewer.refreshPage(pageNumber);
          documentViewer.updateView([pageNumber]);
          documentViewer.refreshAll();
        }).catch(err => {
          console.error(err)
        })
      })
    })

  }, []);

  return (
    <div ref={viewer} style={{ width: "100vw", height: "100vh" }}></div>
  );
};

I listen the event of “mouseLeftUp”, and I click my mouse, the line does not appear on the page.

But I modify the event “mouseLeftUp” to “documentLoaded”, it’s ok.

Thanks!

4

Hello 1310748076,

Since youre modifying the underlying PDF document directly and not through WebViewer, you will have to save the PDF then reload the PDF. Apryse WebViewer Class: PDFDoc

Best regards,
Tyler