软航版式文档签批系统集成入门 - PDF/OFD文档在线签批解决方案

2025年10月29日

软航版式文档签批系统简介

• 软航版式文档签批系统是由重庆软航科技有限公司研发的针对PDF/OFD版式文档提供的一套基于HTML5技术实现的在HTML5浏览器（如Chrome、360极速、火狐、奇安信等）中在线打开电子公文、电子证照、电子票据、电子病历等版式文档进行无痕轻阅读、签批的解决方案。
• 本文介绍软航版式文档签批系统产品的集成入门。

软航版式文档签批系统集成入门指南

01
软航版式文档签批系统集成前期准备
• 获取软航版式文档签批系统产品包；
• 部署软航版式文档签批系统服务，并运行，获取软航版式文档签批系统阅读器服务地址。

02
软航版式文档签批系统集成步骤

• 软航版式文档签批系统集成流程图如下所示：
集成软航版式签批系统需要在页面引入产品SDK、在页面创建容器、创建软航版式文档阅读器对象、注册事件回调、将软航版式文档阅读器嵌入页面、调用文档打开方法、根据需要设定签批用户信息以及操作完成后关闭页面销毁阅读器等流程；其中注册事件回调、打开文档、设定签批用户可根据实际需要放到一起。
本文以最简单的html页面集成软航版式文档签批系统为例子进行介绍。
步骤请参照下文介绍。

01
在html页面引入SDK

• 软航版式文档签批系统SDK库文件在给您发送的产品包里，示例目录的Javascript SDK文件夹里：document-viewer.js。请您将该文件拷贝到您的项目中。
• 您只需要在html页面的head标签中引入软航版式文档签批系统SDK库文件：document-viewer.js，调用对应接口便能轻松实现您需要的PDF/OFD版式文件在线阅读或者签批功能。
• 注意确保SDK文件路径正确，以便后续正常调用，参考代码如下：

<head>
  <script src="document-viewer.js?a=" + Math.round(Math.random()*100000000,0)></script>  //为保证加载到的SDK库是最新的，可以加一个随机数确保刷新，避免更换产品SDK之后浏览器端加载的不是最新的
</head>

在页面创建软航版式文档阅读器的盛放容器

• 您可以在您的html页面指定某个页面元素如div作为航版式文档阅读器的盛放容器，注意设定容器唯一ID，该容器ID后续会使用到。
• 参考代码如下：

<body>
  <div id="viewer"></div>  <!-- 容器高度建议设置为800px以上，根据具体情况调整容器高宽 -->
</body>

创建软航版式文档阅读器对象

• 软航版式文档签批系统提供标准SDK库供各类信息系统集成使用,通过在业务系统中只需要引入SDK库即可调用提供的接口实现各项功能需求。
• 引入软航版式文档签批系统SDK库文件：document-viewer.js之后，您就可以通过定义一个全局变量如docReader作为创建的软航版式文件阅读器对象。
• 全局变量声明方法参考代码：

// 或全局变量声明 newDocumentSDK方法为软航版式文档签批系统SDK：document-viewer.js 提供
var docReader = document.newDocumentSDK();

软航版式文档阅读器事件回调处理

• 为保障软航版式文档阅读器的事件回调处理正常，必须在嵌入前注册回调，否则事件可能无法触发。
• 软航版式文档阅读器的事件回调参考代码如下：

function createReader() {
  //docReader  = document.newDocumentSDK(); //若您声明的软航版式文档阅读器对象是全局变量直接使用即可，若是局部变量则根据情况重新创建
  
  // 关键：在嵌入阅读器embedReader前注册事件，registerCallbacks方法用于注册 该方法是自定义的js function
  registerCallbacks(); 
  
  // 嵌入阅读器
  docReader.embedReader(); //embedReader 方法详解请看下文
}

• 假如您需要实现软航版式文档阅读器加载完成之后设定签批用户信息、即刻打开文档等操作时，就可以通过在注册的事件回调里实现。

• 软航版式文档签批系统SDK库提供了多种事件回调，可满足不同业务需求，根据需要将事件回调写入回调注册方法里即可。

• 参考代码如下所示：

// 回调注册方法 具体内容 
function registerCallbacks() {
  // 1.  addReaderReadyCallback 阅读器加载完毕的回调 
  docReader.addReaderReadyCallback(()  => {
    console.log(' 阅读器初始化完成');
    
    // 设置当前用户  阅读器加载完毕 可以用setSessionUser方法设定签批用户信息
    docReader.setSessionUser({ 
      userName: '测试用户513', //可选，string类型，签批用户名
      userId: 'DemoUser513'   //可选，string类型，签批用户Id，Id信息唯一
    });
    
    // 如果需要实现阅读器加载之后立马打开文档，就在addReaderReadyCallback 阅读器加载完毕的回调里调用打开文档的方法如openPDFDocument、openOfdDocument等方法
    var pdfDemoFileDownloadUrl="http://192.168.0.164:1987/docserver200/docs/document1.pdf";
    var pdfDemoFileUploadUrl="http://192.168.0.164:1987/docserver200/upload.jsp";
    docReader.openPDFDocument({ 
      fileName: '测试pdf文档',
      fileUrl: pdfDemoFileDownloadUrl,  //pdfDemoFileDownloadUrl 为PDF文件的下载地址
      uploadUrl: pdfDemoFileUploadUrl //pdfDemoFileUploadUrl 为PDF文件上传地址
    });
  });
 
  // 2. 其他重要事件回调 根据实际情况写到此处即可
  //更多事件回调参考《软航版式文档签批系统集成手册》
}

将软航版式文档签批系统阅读器嵌入页面

• 假设您部署好的软航版式文档签批系统服务地址为http:192.168.0.216:8099/。
js定义软航版式文档阅读器的服务地址参考代码：

var readerServerURL="http:192.168.0.216:8099/";

• 在页面加载完成后（如onload事件或框架生命周期钩子）嵌入阅读器。
• 将软航版式文档签批系统阅读器嵌入页面实现代码参考如下：

<body onload="createReader()">

• 在页面嵌入软航版式文档签批系统阅读器使用embedReader方法，参考代码如下：

function createReader() {
  //docReader  = document.newDocumentSdk(); //若您声明的软航版式文档阅读器对象是全局变量直接使用即可，若是局部变量则根据情况重新创建
  
  // 关键：在embedReader前注册事件，registerCallbacks方法用于注册 该方法是自定义的js function
  registerCallbacks(); 
  
  // 嵌入阅读器
      docReader.embedReader(
      "viewer",                  // 参数1 必选，容器ID或DOM元素
      readerServerURL,  // 参数2 必选，软航版式文档签批系统阅读器服务地址
      {                          // 参数3 阅读器初始配置选项（可选）
          viewMode: 'View',        //参数viewMode，可设置内容 View：阅读模式|Annotation：批注模式|DigitalSign：签章模式
          language: 'zh_CN'        //参数language即 语言选择，zh_CN|en_US 默认zh_CN中文
      }
    ); 
}

• 在嵌入软航版式文档阅读器时可以对阅读器的界面进行设定，参数介绍如下：

参数	可选值	默认值	说明
viewMode	View/Annotation/DigitalSign	View	可设置内容 View：阅读模式、Annotation：批注模式、DigitalSign：签章模式
language	zh_CN/en_US	zh_CN	界面语言

• 如果您按照上述步骤在回调中调用了文档打开方法，那么到这里您就已经成功将软航版式文档签批系统集成到了您的系统里，并且可以成功打开文档了实现文档的在线阅读了。

软航版式文档签批系统打开文档方法简介

• 软航版式文档签批系统支持PDF/OFD格式版式文档的在线阅读、签批；同时支持Office类型文件的在线预览。

• 软航版式文档签批系统提供的打开OFD文件的方法openOfdDocument方法，该方法介绍如下：

参数名称	可选/必选	数据类型	参数说明
fileOptions	可选	JSON	参数采用键值对形式，具体参见下文代码参考部分

• 参考代码：

// 调用openOFDDocument打开OFD文件代码参考
function OpenOFDFile(){
  // 构建OFD文档打开的参数
    var fileOptions = {
        fileName: 'test.ofd', //打开的OFD文件名
        fileUrl: 'http://192.168.0.168:1988/ServletDemo/down?filename=test.ofd',  //远程OFD文档下载地址
        uploadUrl:'http://192.168.0.168:1988/ServletDemo/Save?filename=test.ofd',  //OFD文档上传地址
        readOnly: false //表示文档可以签批且支持提交到服务器，true表示只能查看。
    };
   docReader.openOfdDocument(fileOptions); //调用软航版式文档阅读器对象的openOfdDocument打开远程服务器上的OFD文件

}

• fileOptions数据结构中fileUrl可以换成fileBase64，即支持打开提供的base64格式的OFD文档数据。

• uploadUrl上传地址，处理逻辑类似表单附件上传，涉及文件域默认是fileUpload。

设定签批用户信息方法介绍

• 软航版式文档签批系统SDK提供setSessionUser({userName,userId})方法用于设定文档签批用户信息，参数说明如下：

参数名称	可选/必选	数据类型	参数说明
userName	可选	string	签批用户名
userId	可选	string	签批用户ID信息，唯一

• 注意：该方法参数实际为json格式，因此实际代码里采用键值对方式进行赋值。

• 参考代码如下：

//docReader为软航版式文档阅读器对象
 docReader.setSessionUser({userName: '测试用户', userId: 'demo'});

页面关闭销毁阅读器

• 当用户完成文件阅读、签批之后就就可以关闭文档，可以在页面关闭时释放资源。

• 参考代码如下：

<body onload="createReader()" onunload="removeReader()">

// 原生JS示例
function removeReader() {
    docReader.removeReader();
}

• 更多产品集成技巧、知识敬请关注我司其他资料。

• 如您想了解更多软航版式签批系统可联系我司人员进行了解，电话：023-62943208。