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();
});
AdChoices