On before load document event to back up document before loading newly opened document

[Jill Griggs]

I am trying to make a backup of the currently loaded document before a user opens a new PDF document into the viewer using the Open toolbar button. The documentLoad event fires after the document is loaded, and I am looking for an event that would fire before the loading of the document. Do you have any suggestions? Thanks for your help!

[Venkada Subramanian Durai]

Hi Jill Griggs,

Thank you for the update. The documentUnload event in the PDF Viewer is triggered when the current PDF document is being unloaded. You can use this event to retrieve the PDF data of the current document before loading a new PDF in the PDF Viewer.
 

Please use the provided code snippet to get the PDF data using the saveAsBlob API within the documentUnload event of the PDF Viewer. Please check whether this meets your requirements and let us know if you have any questions.

Code snippet for getting the unloaded PDF data:
 

//fires while closing the document

viewer.documentUnload = function () {

 viewer.saveAsBlob().then(function (blob) {

   const reader = new FileReader();

 

   reader.onloadend = function () {

     const unloadedPdfData = reader.result;

     //get the unloaded PDF document data as base64

     console.log(unloadedPdfData);

   };

 

   reader.readAsDataURL(blob);

 });

};

 

Sample for getting the PDF data of unloaded PDF document as base64

 

Regards,
Venkada Subramanian D

[Jill Griggs]

It seems like it is saving the last document loaded in the viewer, not saving the changes made before the event is triggered. The link you have at the end does not really show me this scenario

[Venkada Subramanian Durai]

Hi Jill Griggs,

Thank you for the clarification on the requirement. If you need to save the PDF document with the changes made by the user in the PDF Viewer, please note that there is currently no direct support for retrieving the PDF data of an unloaded document along with the modifications made in the viewer.
 

However, this can be achieved at the application level by adding an Open option as a custom toolbar item in the PDF Viewer.
 

When the Open File option is clicked, you can:

1. Retrieve the current PDF document as Base64 using the ⁠saveAsBlob API.
2. Load the selected PDF document using the Uploader component and the ⁠load API in the PDF Viewer.
    

In this way, you can save and reuse the unloaded PDF document along with the changes made by the user. We have attached a demo video based on the shared application to illustrate this behavior.
 

Please check whether this approach meets your requirements and let us know if you have any questions.

 

Code snippet:

 

reader.addEventListener('load', () => {

  let pdfToLoad = reader.result;

  viewer.saveAsBlob().then(function (blob) {

    const reader = new FileReader();

    reader.onloadend = function () {

      unloadedPdfData = reader.result;

      //get the unloaded PDF document data as base64

      console.log(unloadedPdfData);

      //load new PDF document as base64

      viewer.load(pdfToLoad, null);

    };

    reader.readAsDataURL(blob); // Use this

  });

});

 

 

Sample for getting the PDF data of unloaded PDF document with changes

 

⁠UG for primary toolbar customization in PDF Viewer

 

Regards,

Venkada Subramanian D

Attachment: getunloadedpdfdocumentwithchangesdemo_99121095.zip