How to get the annotation id when I highlight some text and also how to get the page no, quads and highlighted text from my annotations object?

PDF.js Express Version

Detailed description of issue
Previously in version 7.2.1, I write some code [code provided in code snippet section] to get the annotation id, quad, text, and page no but in version 8.0.1 I have not found annotations[0][‘Ku’], annotations[0].Ob, annotations[0].E_, annotations[0].JF this attributes from annotations object.

Expected behavior
When I highlight some text then it will highlight the text but now got this error, " Unhandled Rejection (TypeError): Cannot read properties of undefined (reading ‘toString’)"

Does your issue happen with every document, or just one?
It happens for every document.

Link to document


Code snippet

annotManager.on('annotationChanged', (annotations, action, { imported }) => {
  const citations = this.props.citations.filter(x => == annotations[0]['Ku']);
  annotManager.exportAnnotCommand().then((xfdfString) => {
    var xfdfJson = JSON.parse(convert.xml2json(xfdfString, { compact: true, spaces: 4 }).toString());
    if (xfdfJson.xfdf.add['highlight'] !== undefined && xfdfJson.xfdf.add['text'] === undefined && annotations[0]['Subject'] === "Highlight" && citations.length === 0 && action === 'add') {
      const highlight = annotManager.getAnnotationById(annotations[0]['Ku'].toString());
        quads: annotations[0].Ob,
        text: annotations[0].E_,
        page: annotations[0].JF,

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:


Hi Arman,

Please have a look at our documentation to access these properties. PDFJS Express WebViewer Class: TextHighlightAnnotation

Currently it looks like you are using our obfuscated properties, there are no guarantees that these will be the same between builds.

Here are the properties you are looking for:

          console.log(highlightAnnot.Id); // ID
          console.log(highlightAnnot.Quads); // QUADS
          console.log(highlightAnnot.getContents()); // Highlighted text
          console.log(highlightAnnot.getPageNumber()); // Page Number


1 Like