软航版式文档签批系统VUE2.0集成入门指南（一）

软航版式文档签批系统VUE2.0集成前期准备

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

软航版式文档签批系统VUE2.0项目集成步骤

为适配VUE的组件化架构，便于封装逻辑，与 Vue 的生命周期、响应式数据联动，避免全局污染提升复用性，使其可在多个组件中导入使用；便于维护，统一管理依赖和逻辑，符合 Vue 的开发范式，减少与框架的冲突。我司已将软航版式文档签批系统SDK组件化，组件名为：ntko-reader，已提交npm服务器，提供全局功能扩展供应用系统调用。
Vue2.0项目里，步骤请参照下文介绍。

安装组件ntko-reader

命令行窗口跳转到您的项目根目录下，运行如下命令安装下载并安装组件：

npm install ntko-reader

使用npm install命令安装后，会将ntko-reader组件文件下载到您当前应用的node_modules目录下，该目录下会有ntko-reader文件夹。

在Vue项目入口文件src/main.js里引用插件

参考代码如下

import Vue from 'vue'
import App from './App.vue'
import NtkoReader from "ntko-reader" //使用 import 语法导入需要的ntko-reader组件
//组件提供了Install方法所以调用vue.use()检查插件是否安装，如果安装了就不再安装
//没有安装，那么调用ntko-reader的install方法，并传入Vue实例，同时设定readerServerURL传入版式文档服务的服务地址
Vue.use(NtkoReader,{
   readerServerURL:"http://[项目地址URL]:8099/" 
})
Vue.config.productionTip = false //设置Vue.config.productionTip为 false 以阻止 vue 在启动时生成生产提示。
new Vue({
  render: h => h(App),  //// 使用 App 作为根组件进行渲染
}).$mount('#app')

在需要引入软航版式阅读功能的vue模板引入ntko-reader组件

如需要在app.vue页面的模板部分引用ntko-reader组件，参考代码：

<template>
  <div id="app">
    <input type="button" value="打开OFD文档" onclick="OpenOFDFile()"/>
    <div id="ntkodiv">
    <!--以标签形式使用注册的ntko-reader组件-->
    <ntko-reader ref="ntkoreader"
      width="1000px"
      height="600px"
    ></ntko-reader>
    </div>
  </div>
</template>

至此您就将软航版式签批系统的软航版式阅读器嵌入了您需要的页面里了。
接下来您就可以调用产品提供的打开PDF、OFD等的API接口进行打开文档了。

注册软航版式文档签批系统事件

要打开文档，需要确保软航版式阅读器已经加载完成，只有加载完成后的软航版式阅读器才能正常打开文档。
软航版式签批系统提供阅读器加载完成后事件：addReaderReadyCallback，在该事件里调用打开文档方法可实现软航版式阅读器加载后在线打开PDF、OFD文档。
在Vue 2项目中，您可以直接给在标签里添加属性，注册addReaderReadyCallback事件回调。
参考代码如下所示：

<!--以标签形式使用注册的组件 并给组件添加ref属性为ntkoreader，后续可通过`this.$refs["ntkoreader"]`访问到组件实例
    通过@addReaderReadyCallback="addReaderReadyCallback"添加addReaderReadyCallback阅读器加载完成回调事件  -->
 <ntko-reader 
 ref="ntkoreader"
 width="1000px"
 height="600px"
 @addReaderReadyCallback="addReaderReadyCallback"
 ></ntko-reader>

上述代码，注册了addReaderReadyCallback事件的同时，指向了一个addReaderReadyCallback方法，因此您需要再写一个addReaderReadyCallback方法。

阅读器加载完成后打开文档

以在App.vue的script部分添加methods为例，参考代码如下：

<script>
export default {
  name: 'App',
  components:{
  },
  methods:{
    //以下为编写的addReaderReadyCallback方法，用于执行addReaderReadyCallback事件回调
    addReaderReadyCallback(){
        console.log("addReaderReadyCallback事件触发")
        const ntkoReader=this.$refs["ntkoreader"]
      // 设置当前用户  阅读器加载完毕 可以用setSessionUser方法设定签批用户信息
    ntkoReader.setSessionUser({ 
      userName: '测试用户513', //可选，string类型，签批用户名
      userId: 'DemoUser513'   //可选，string类型，签批用户Id，Id信息唯一
    });
        const fileOptions={
          fileName:"测试文档",
          fileUrl:"http://[项目地址URL]:1987/docserver200/docs/document4.ofd", //文档下载地址
          uploadUrl:"http://[项目地址URL]:1987/docserver/upload.jsp"//保存文档地址
      }   
      ntkoReader.openOFDDocument(fileOptions)//打开文档的方法需要在软航版式阅读器嵌入页面加载完成后执行
    },
  },
  mounted() {
    //mounted 是 Vue 2 组件生命周期中的最后一个阶段，当组件的模板被渲染完成且DOM元素插入页面后触发。 ‌
  }
}

恭喜您，到这里就已经实现了Vue 2项目打开页面调用软航版式文档签批系统，并成功打开了文档。

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

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

• 软航版式文档签批系统是由重庆软航科技有限公司研发的针对PDF/OFD版式文档提供的一套基于HTML5技术实现的在HTML5浏览器（如Chrome、360极速、火狐、奇安信等）中在线打开电子公文、电子证照、电子票据、电子病历等版式文档进行无痕轻阅读、签批的解决方案。
• Vue作为一款主流前端框架，易上手，响应式数据绑定、组件化开发以及丰富的指令系统为Vue开发提供了高效的开发体验，其开发的应用性能优越，轻量高效，支持组件懒加载、计算属性缓存、列表渲染优化等等，均有效提升了应用性能。