Custom button to store the annotation image using Blob string

Technical Support
1

Hi,
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

      header.push({
            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' });  
                
                })
                
                
            }
2

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

3

Hi there,

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

Best Regards,
Darian

4

Hi,
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.

5

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('https://api.pdfjs.express/xfdf/set', {
              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())

            window.open(URL.createObjectURL(outputBlob));
          },

Best Regards,
Darian