这个基于 Flex 的 PDF Control 范例应用程序可加载 PDF 文件。请使用 HTML (而非嵌入式 PDF 渲染器) 提供的用户界面在文件中导航。缩放和导航按钮位于应用程序的顶部 (见图 1)。

PDF Control 范例应用程序演示 Adobe AIR 的以下 PDF 内容处理功能:

• 向 AIR 应用程序添加 PDF 内容
• 使用 Acrobat 8 向 PDF 文件添加 JavaScript
• 使用 AIR 应用程序中的 ActionScript 与 PDF 文件中的文档级 JavaScript 进行通信

图 1。通过本范例应用程序可以加载 PDF 文件。

注意: 本范例应用程序按原样提供, 用于教学目的。

要求

若要充分利用本篇文章, 您需要以下软件和文件:

Adobe AIR

• 下载

Adobe Flex Builder 3

• 试用
• 购买

范例文件:

• PDFControlFlex.zip (ZIP, 102K)
• PDFControlFlex.air (AIR, 551K)

本范例应用程序包括以下文件:

• PDFControlFlex.mxml: 应用程序主文件 (Flex 的 MXML 格式), 其中包括本文所讨论的代码
• PDFControlFlex-app.xml: AIR 应用程序描述符文件
• test.pdf: 应用程序加载的 PDF 示例文件
• index.html: 加载到应用程序中的 HTML 文件
• AIR 图标文件范例

必备知识

应具备使用 Flex Builder 或 Flex SDK 构建应用程序的一般经验。有关使用此快速入门指南的详细信息, 请参阅用 Flex 构建快速入门范例应用程序。

了解代码

注意: 对于文件的 MXML 代码所使用的全部 Flex 组件, 本文将不一一介绍。有关详细信息, 请参阅《Flex 3 语言参考》*。

PDF 文件中用于处理消息的 JavaScript 函数

在 PDF 文件的文档级 JavaScript 中, 可以将函数赋给 hostContainer 对象的 msgHandler 属性的 onMessage、onError 和 onDisclose 属性。这些函数定义 PDF 文件如何处理从宿主容器向其发送的消息。

范例文件随附的 test.pdf 文件包含以下文档级 JavaScript:

function myOnMessage(aMessage)
{
    if (aMessage.length==1) {
        switch(aMessage[0])
        {
            case "ZoomIn":
                zoom *= 2;
                break;
            case "ZoomOut":
                zoom /= 2;
                break;
            case "PageUp":
                pageNum--;
                break;
            case "PageDn":
                pageNum++;
                break;
            default:
                app.alert("Unknown message: " + aMessage[0]);
        }
    }
    else
    {
        app.alert("Message from hostContainer: \n" + aMessage);
    }
}
             
function myOnDisclose(cURL,cDocumentURL)
{
    return true;
}
             
function myOnError(error, aMessage)
{
    app.alert(error);
}
             
var msgHandlerObject = new Object();
msgHandlerObject.onMessage = myOnMessage;
msgHandlerObject.onError = myOnError;
msgHandlerObject.onDisclose = myOnDisclose;
             
this.hostContainer.messageHandler = msgHandlerObject;

这段代码定义用于处理传入消息的函数。并将这些函数设置为 msgHandlerObject 对象的 onMessage、onError 和 onDisclose 属性。这段代码将 msgHandlerObject 对象赋给 hostContainer 对象的 msgHandler 属性。myOnDisclose() 函数检查传入消息数组中的第一个字符串, 并采取适当的措施。例如, 如果字符串是 "ZoomIn", 则这段代码设置一个 PDF JavaScript 属性 (zoom *= 2), 用于放大页面。

本范例应用程序显示基本的页面导航和缩放系数。Adobe Acrobat 开发人员中心中提供有关用于 Adobe Acrobat 的其它 JavaScript 扩展的全部详细信息。

向 PDF 文件添加文档级 JavaScript

请按照以下步骤操作:

1. 创建名为 test.pdf 的 PDF 文档, 并将其保存至应用程序的项目目录。
2. 在 Acrobat 8 中打开该 PDF 文档。
3. 在“高级”菜单上选择“文档处理”>“文档级 JavaScript”。
4. 在“JavaScript 函数”对话框中键入 myOnMessage 作为“脚本名称”, 然后单击“添加”按钮。

5. 在“JavaScript 编辑器”窗口中将文本编辑为以下内容, 然后单击“确定”按钮。

   function myOnMessage(aMessage)
   {
       if (aMessage.length==1) {
           switch(aMessage[0])
           {
               case "ZoomIn":
                   zoom *= 2;
                   break;
               case "ZoomOut":
                   zoom /= 2;
                   break;
               case "PageUp":
                   pageNum--;
                   break;
               case "PageDn":
                   pageNum++;
                   break;
               default:
                   app.alert("Unknown message: " + aMessage[0]);
           }
       }
       else
       {
           app.alert("Message from hostContainer: \n" + aMessage);
       }
   }
    
   function myOnDisclose(cURL,cDocumentURL)
   {
       return true;
   }
    
   function myOnError(error, aMessage)
   {
       app.alert(error);
   }
    
   var msgHandlerObject = new Object();
   msgHandlerObject.onMessage = myOnMessage;
   msgHandlerObject.onError = myOnError;
   msgHandlerObject.onDisclose = myOnDisclose;
    
   this.hostContainer.messageHandler = msgHandlerObject;

   有关这段代码的介绍, 请参阅前一节。

6. 关闭“JavaScript 函数”对话框。
7. 选择“文件”>“属性”命令。

8. 在“文档属性”对话框中选择以下选项:

   • “导览标签”: “仅页面”
   • “页面布局”: “单页”
   • “放大率”: “默认”
   • “打开到页面”: 1
   • “隐藏菜单栏”: 选中
   • “隐藏工具栏”: 选中
   • “隐藏窗口控件”: 选中
9. 将该 PDF 文档保存至项目目录, 并将其命名为 test.pdf。

将 PDF 内容加载至 AIR 应用程序中

AIR 应用程序可以在 HTMLLoader 对象内呈现 PDF 内容。Flex HTML 组件是 HTMLLoader 对象的包装。以下是范例应用程序 MXML 代码的第二行至最后一行:

<mx:HTML id="pdfHtml" location="test.html" width="100%" height="100%" />

这段代码加载应用程序随附的 HTML 页 test.html。而 test.html 页则加载 PDF 内容, 这些内容也由应用程序随附, 即 test.pdf。以下是该 HTML 页的代码:

<html>
    <body>
        <object id="PDFObj"
            data="test.pdf"
            type="application/pdf"
            width="100%"
            height="100%"/>
    </body>
</html>

与 PDF 文件中的 JavaScript 通信

范例应用程序的 MXML 代码定义了四个 Button 组件:

<mx:Label text="Zoom:" width="75"/>
<mx:Button id="btn1" label="+" click="sendMessage('ZoomIn')" width="35" enabled="false"/>
<mx:Button id="btn2" label="-" click="sendMessage('ZoomOut')" width="35" enabled="false"/>
 
<mx:Label text="Navigate:" width="75"/>
<mx:Button id="btn3" label="&lt;" click="sendMessage('PageUp')" width="35"enabled="false"/>
<mx:Button id="btn4" label=">" click="sendMessage('PageDn')" width="35" enabled="false"/>

直到将 DOM 和 HTML 组件初始化时才启用这些按钮。调度 applicationComplete 事件时, 此应用程序调用 (在 MXML 代码中定义的) init() 函数:

private function init():void
{
    pdfHtml.htmlLoader.addEventListener(Event.HTML_DOM_INITIALIZE, htmlLoaded);
}
private function htmlLoaded(event:Event):void
{
    btn1.enabled=true;
    btn2.enabled=true;
    btn3.enabled=true;
    btn4.enabled=true;
}

用户单击任意一个 Button 组件时, click 事件处理函数都将调用 sendMessage() 方法。例如, 单击第一个按钮将执行以下代码:

sendMessage('ZoomIn')

sendMessage() 方法将 pdfObj 对象设置为 HTML 页中的 PDFObj 元素。此对象位于包含 PDF 嵌入内容的 HTML DOM 中。可以向嵌入的 PDF 对象发送消息, 途径是调用该对象的 postMessage() 方法。postMessage() 方法采用消息字符串的数组作为参数:

private function sendMessage(message:String):void
{
    try
    {
        var pdfObj:Object = pdfHtml.htmlLoader.window.document.getElementById("PDFObj");
        pdfObj.postMessage([message]);
    }
    catch (error:Error)
    {
        trace( "Error: " + error.name + "\nError message: " + error.message);
    }
}

PDF 文件中的文档级 JavaScript 定义了一个 hostContainer.messageHandler 对象。此对象确定如何处理传入的消息。 (有关详细信息, 请参阅上面的“PDF 文件中用于处理消息的 JavaScript 函数”一节。) 在本应用程序中可以对 PDF 内容进行导航或放大。

关于作者