Custom button to store the annotation image using Blob string

I try custom button to store the annotation image using Blob string but it return as null always for each click
Pls find the sample code as follow

            type: 'actionButton',
            img: '../../Images/Rep_Save2.png',
            dataElement: 'alertButton',
            onClick: () => {
                const xfdfString = instance.Core.annotationManager.exportAnnotations();
              // save the annotations
              // must wait for the document to be loaded before you can save the file
              documentViewer.addEventListener('documentLoaded', async () => {
                const documentStream = await documentViewer.getDocument().getFileData({});
                const documentBlob = new Blob([documentStream], { type: 'application/pdf' });  

Thank you for posting the incident to our forum. We will provide you with an update as soon as possible.

Hi there,

Please see this guide on how to save a blob with annotations.

Best Regards,

As per yr guide document URL it is mentioned to load/download the pdf file. Here my requirement i need to store output of blob to DB using Custom button.
Using Button Click , I try to get the output Blob but it is return as null object.

Pls do the needful action.

Hi there,

Could you remove the addEventListener with the documentLoaded event? This will only trigger when a new document is loaded.

You can merge or set the XFDF with either the merge or set endpoint.

Please try using the following code.

          onClick: async () => {
            const xfdfString = await instance.Core.annotationManager.exportAnnotations();
            const documentStream = await documentViewer.getDocument().getFileData({ xfdfString: xfdfString });
            const blob = new Blob([documentStream], { type: 'application/pdf' });

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

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

            const { url, key, id } = response;
            const outputBlob = await fetch(url, {
              headers: {
                Authorization: key
            }).then(resp => resp.blob())


Best Regards,