Inserting File Document Data into Blob Object - PDFTron Webviewer

Technical Support
, , ,
1

Hello, we are using PDFTron Webviewer on our web application. Just want to double-check and verify that our implementation of inserting the document file data into the Blob object is correct (code snippet at the bottom).

Does the following code look correct to insert file data into the Blob object?

            const doc = documentViewer.getDocument();
            const fileData = doc.getFileData();
            const blob = new Blob([fileData], { type: 'application/pdf' });

      WebViewer({ path, initialDoc: props.initialDoc, fullAPI: true, enableRedaction: true }, viewer.value).then(
        (instance) => {
          const { documentViewer, annotationManager, Annotations, PDFNet } =
            instance.Core;

          document.getElementById('save-file').addEventListener('click', () => {
            const doc = documentViewer.getDocument();
            const fileData = doc.getFileData();
            const blob = new Blob([fileData], { type: 'application/pdf' });
                                                
            const data = new FormData();
            data.append('testfiledoc123.pdf', blob, 'testfiledoc123.pdf');
            data.append('workspace', workspace);
            data.append('asset_id', asset_id);
                        
            const req = new XMLHttpRequest();
            req.open("POST", post_url, true);
            req.onload = function(oEvent) {
            };
            req.send(data);
          });
        }
      );
2

Hello @skhan,

Based on this guide, it looks like you are missing a step when converting the fileData to a blob. The example below also shows the additonal parameter that is needed if you want to save any annotations that are in the document:

            const doc = documentViewer.getDocument();
            const xfdfString = await annotationManager.exportAnnotations();
            const data = await doc.getFileData({
              // saves the document with annotations in it
              xfdfString
            });
            const arr = new Uint8Array(data);
            const blob = new Blob([arr], { type: 'application/pdf' });

Best Regards,
Armando Bollain
Software Developer
PDFTron Systems, Inc.