Passing information/actions from the browser to an embedded PDF object

Avg. Rating 5.0

Tags:

Problem

When a PDF is opened in a browser, it cannot communicate with the web page that hosts it.

Solution

To pass information, we need to add what is called a Form Bridge, which presents an API to JavaScripts in the browser, and add to it our own functions. We then need to script the host page of the PDF container (which loads the Reader or Acrobat browser plugin) so that it pushes the data to the form. The result object of this operation allows us also to get data back from the form in the web page.

Detailed explanation

This solution requires LiveCycle Designer, available as standalone or distributed with Acrobat Professional.

In this example, we will be looking at a way to pass info from the browser to the PDF, and get a result back from the PDF to display it in the browser.

1) Add a Form Bridge object to your PDF using LiveCycle Designer - the Form Bridge is in the "Object Library" under "Custom"

2) Add the following to the ContainerFoundation_JS script that appears in the Form Bridge object:

a) Where there are lines of variables that are named like R_(xxxx) add a new variable:

var R_PDF_INFO  = "passPdfInfo";

b) In the gotMessage function, add a new case statement to catch your variable and execute the appropriate function:

case R_PDF_INFO:  returnVal = receivePdfInfo(param1); break;

c) Add a new function to the script, and a global variable to keep data in if necessary:

function receivePdfInfo(param1) {
// param1 is the data from the browser
// simply return a string from this function
// to return it to the browser
}

3) In the web page that is to display the PDF, add a <div id="divContainer"></div>. This will be used to host the PDF*. Due to the way the plug-in is loaded and load timings, we need to load the PDF dynamically.

a) Add the following code in a <script> node:

var pdfObj = null;
var pdfurl = "example.pdf";
var inibr = false;
 
function successFunc(msg) {
    
    //alert(msg.length+" items in "+msg);
    
        // Catch returned message from PDF bridge action
        if( msg[0] == "initialized" && msg[1] == "1") {
                // initialization success
                inibr = true;
        } else if(msg[1] == 'passPdfInfo' && msg[2] == "success") {
            // see the result returned from your function
            // in msg[3]
        }
}

function failFunc( errObj, stringArray )
    {
        var errmsg = "Error # "+errObj.number+"\n"+
            "Description: "+errObj.description+"\n"+
            "Message : "+errObj.message+"\n"+
            "Name : "+errObj.name+"\n"+
            "Origin : \n"+stringArray
        alert(errmsg);
    }

function assignHandler() {
        pdfObj.messageHandler = {
                onMessage: successFunc,
                onError: failFunc
        };
}

function makeContainer(url) {
        pdfObj = document.createElement("object");
        pdfObj.setAttribute("data",url);
        pdfObj.setAttribute("src",url);
        pdfObj.setAttribute("width","70%");
        pdfObj.setAttribute("height","70%");
        
        if(navigator.appName!="Microsoft Internet Explorer") {
            // Only assign if not IE
            pdfObj.setAttribute("type","application/pdf");
        }

        document.getElementById("pdfContainer").appendChild(pdfObj);
        
        // The following will not work unless put in a setTimeout routine
        window.setTimeout("assignHandler();",0);
}

function tellPdf(unk,funcName,param) {
    try {
        if(!inibr) {alert("Form Bridge has not initialized.");return false;}
       
        pdfObj.postMessage(new Array(unk,funcName,param));
        return true;
    } catch (e) {
        alert(e);
        return false;
    }
}

b) Add the makeContainer() function to the page body's onLoad event:

<body onLoad="makeContainer(pdfurl);"> ...

c) Use the tellPdf() function hereafter in any button, link etc to pass information to the PDF

<input type="button" onclick="tellPdf('1','passPdfInfo','information' );" value="Pass info !" />

This should be sufficient to load a PDF in a page, and pass information to it from the web page.

I have attached an example implementation, which works in FireFox and Internet Explorer and can be run from the file system - download it at the bottom of this article (ZIP file, 2 documents)

* Note: If you use a DTD in the page, the DIV has to have a size of its own so that the PDF container can calculate its own size:

<div id="divContainer" style="width:1200px; height:800px"></div>

passing_info_page_pdf.zip

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.