• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

PDF Embed API changes lost on Edit PDF with mouse scroll to next field

New Here ,
Apr 12, 2022 Apr 12, 2022

Copy link to clipboard

Copied

We have a web page that allows users to edit/fill a PDF form using the PDF Embed API. It works great for the most part, but we have noticed some issues when a user edits/fills a PDF. When a user enters data in a field in the PDF, and then uses their mouse to scroll to another field, the data entered in the first field are lost. Conversely, if the user enters data in a field and then uses the tab key to move to another field, everything works fine. It looks like there is some sort of an ‘OnChange’ event that is not triggered when using the mouse to scroll from one field to another. Needless to say, this is a showstopper for us because we can’t afford to lose user entered data. Please help.

 

    To embed the pdf we are using the tag <div id="dwc-draft-view"></div>  

    Here is the code snippet that embeds the PDF.

              

               ////ADOBE - START

               const clientId = '########';

               var urlToPDF='';

               const viewerOptions = {

                 embedMode: "FULL_WINDOW",

                 defaultViewMode: "FIT_PAGE",

                 showDownloadPDF: false,

                 showPrintPDF: false,

                 showLeftHandPanel: false,

                 showAnnotationTools: false

               };

              

               const saveOptions = {

                 autoSaveFrequency: 0,

                 enableFocusPolling: false,

                 showSaveButton: false

               };

              

               var fetchPDF = function(urlToPDF) {

                 return new Promise((resolve) => {

                   fetch(urlToPDF)

                     .then((resolve) => resolve.blob())

                     .then((blob) => {

                       resolve(blob.arrayBuffer());

                     });

                 });

               };

              

               var goToPage = function(previewFilePromise, pageNum) {

                 previewFilePromise.then((adobeViewer) => {

                   adobeViewer.getAPIs().then((apis) => {

                     // Go to the page. Page numbers are 1 based.

                     apis.gotoLocation(parseInt(pageNum));

                   });

                 });

               };

              

               var processEvent =  function(event, previewFilePromise) {

                 if (event.type == "PDF_VIEWER_OPEN") {             

                   // Get the page parameter from the URL

                   const queryString = window.location.search;

                   const urlParams = new URLSearchParams(queryString);

                  var pgN = urlParams.get("page");

                   if(pgN === undefined || pgN === null || pgN === '' || isNaN(pgN)) {

                               goToPage(previewFilePromise, 1);

                   } else {

                               const pageNum = urlParams.get("page");

                               goToPage(previewFilePromise, pageNum);

                    }

                   // Go to the page number specified in the URL

                 }

               };

              

               var arrayBufferToBase64 = function( buffer ) {

                   var binary = '';

                   var bytes = new Uint8Array( buffer );

                   var len = bytes.byteLength;

                   for (var i = 0; i < len; i++) {

                       binary += String.fromCharCode( bytes[ i ] );

                   }

                   return window.btoa( binary );

               };

              

dialog.find('#finalDwcFormDiv').off('adobe_dc_view_sdk.ready').on('adobe_dc_view_sdk.ready', function(e) {      

                                // Create embedded view                        

                                var adobeDivId = 'dwc-draft-view'

                                                           

                                adobeDCView = new AdobeDC.View({

                                             clientId: clientId,

                                             divId: adobeDivId

                                });          

                                 

                                adobeDCView.registerCallback(

                                                                           AdobeDC.View.Enum.CallbackType.SAVE_API,

                                                                           function(metadata, content, options) {  

                                                                                          // Save API Content

                                                                           },

                                                                           { autoSaveFrequency: 300,                                                                      

                                                                             enableFocusPolling: true,

                                                                             showSaveButton: false

                                                                           }

                                                            );            

                                 // Show the file

                                var previewFilePromise = adobeDCView.previewFile({

                                                              content: { promise: fetchPDF(urlToPDF) },

                                                              metaData: { fileName: urlToPDF.split("/").slice(-1)[0] }

                                                            },

                                                            viewerOptions

                                );

 

                                // create object to set events that we want to listen for

                                var eventOptions = {

                                             listenOn: [AdobeDC.View.Enum.Events.PDF_VIEWER_OPEN],

                                             enableFilePreviewEvents: true

                                };

                               

                                // register the event callback

                                adobeDCView.registerCallback(

                                                                           AdobeDC.View.Enum.CallbackType.EVENT_LISTENER,

                                                                           function (event) {            

                                                                                          console.log('Even :'+e);

                                                                                            processEvent(event, previewFilePromise);

                                                                                          },

                                                                                          eventOptions

                                                                           );

                                //careUtil.hideWaitDialog();      

               });

 

TOPICS
PDF Embed API , PDF Services API

Views

147

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
no replies

Have something to add?

Join the conversation
Resources