Instance functionality not working

Technical Support
1

Hii,
I have downloaded react project which you have given, It is runnning for viewing but if I am trying to import and export markup then giving some undefined error.
In instance, there is no core object and if i am calling documentViewer.addEventListener then it is also not working.
Also can you please guide me for how to save & extract annotations.

WebViewer(
{
path: ‘/webviewer/lib’,
initialDoc: ‘/files/pdftron_about.pdf’,
},
viewer.current,
).then((instance) => {
const { docViewer, Annotations } = instance;
const {DocumentViewer} = instance.CoreControls;
instance.setTheme(‘dark’)
console.log("instance : ",instance,instance.Core,instance.annotManager.exportAnnotations());
const annotManager = docViewer.getAnnotationManager();
DocumentViewer.addEventListener(‘documentLoaded’, async () => {
const fileData = await DocumentViewer.getDocument().getFileData({});
const blob = new Blob([fileData], {type: ‘application/pdf’})

    const data = new FormData();
    data.append('file', blob);
    // data.append('license', my_license_key);

    // Process the file
    const response = await fetch('https://api.pdfjs.express/xfdf/extract', {
      method: 'post',
      body: data
    }).then(resp => resp.json());

    const { xfdf } = response;

    const importedAnnotations = await annotManager.importAnnotations(xfdf);
  })
  // docViewer.on('documentLoaded', async () => {
  //   // Save to your database
  //       // await saveToDatabase(xfdfString)
  //   const rectangleAnnot = new Annotations.RectangleAnnotation();
  //   rectangleAnnot.PageNumber = 1;
  //   // values are in page coordinates with (0, 0) in the top left
  //   rectangleAnnot.X = 100;
  //   rectangleAnnot.Y = 150;
  //   rectangleAnnot.Width = 200;
  //   rectangleAnnot.Height = 50;
  //   rectangleAnnot.Author = annotManager.getCurrentUser();

  //   annotManager.addAnnotation(rectangleAnnot);
  //   // need to draw the annotation otherwise it won't show up until the page is refreshed
  //   annotManager.redrawAnnotation(rectangleAnnot);
  // });
});

image
image1308×323 31.8 KB

2

Hello tejshree.bang

It looks like youre using an older version, please update to the latest version!

You can access documentViewer like so:

instance.Core.documentViewer

Accessing the DocumentViewer (with a capital D) is the class, not the instance of the class.

Saving and extracting Annotations guide: Merge & Extract Annotation on PDF.js Express | Documentation

Best regards,
Tyler Gordon