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

01

前言

• 

  02
  

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

  

• 
  
  
  

  
  

  01

  集成前期准备

• 
  

  
  

  02

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

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://192.168.0.192:8099/" 
})
Vue.config.productionTip = false //设置Vue.config.productionTip为 false 以阻止 vue 在启动时生成生产提示。
new Vue({
  render: h => h(App),  //// 使用 App 作为根组件进行渲染
}).$mount('#app')

如需要在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接口进行打开文档了。
3注册软航版式文档签批系统事件

要打开文档，需要确保软航版式阅读器已经加载完成，只有加载完成后的软航版式阅读器才能正常打开文档。
软航版式签批系统提供阅读器加载完成后事件：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方法设定签批用户信息
        console.log(ntkoReader)
        ntkoReader.setSessionUser({
          userName: '测试用户513', //可选，string类型，签批用户名
          userId: 'DemoUser513'   //可选，string类型，签批用户Id，Id信息唯一
        })
        const fileOptions={
          fileName:"测试文档",
          fileUrl:"http://192.168.0.164:1987/docserver200/docs/document4.ofd", //文档下载地址
          uploadUrl:"http://192.168.0.164:1987/docserver200/upload.jsp"//保存文档地址
      }   
      ntkoReader.openOFDDocument(fileOptions)//打开文档的方法需要在软航版式阅读器嵌入页面加载完成后执行
    },
  },
  mounted() {
    //mounted 是 Vue 2 组件生命周期中的最后一个阶段，当组件的模板被渲染完成且DOM元素插入页面后触发。 ‌
  }
}

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