前端vue集成金格科技 iwebPdf 2018中间件

如有侵权立删
需求: 管理系统有个在线pdf盖章的需求,公司购买了金格科技签章中间件,打包项目中有技术白皮书,但是写的过于笼统,因此记录一下开发过程.

定制人脸识别设备在线签订劳务协议,金格中间件需要插入加密U盘才可以签章

开发电脑必须安装金格应用
vue中新建html文件,引入插件,其中zjPdf为需要编写的js
vue点击签章时跳转到新建的html
编写pdf.js

var PDF = null;window.onload = function loadpage() {setTimeout(function () {create()//创建按钮元素signature()//签章事件preservation()//保存事件load();//创建实例}, 20);
}
// 创建元素
function create() {let signature = document.createElement("button");signature.id = "signature"let preservation = document.createElement("button");preservation.id = "preservation"signature.innerText = "签章";preservation.innerText = "保存";//插入到最前面document.body.insertBefore(preservation, document.body.firstElementChild);document.body.insertBefore(signature, document.body.firstElementChild);
}
// 签章事件
function signature() {if (document.getElementById("signature")) {document.getElementById("signature").onclick = function () {console.log("签章");}}}
// 保存事件
function preservation() {if (document.getElementById("preservation")) {document.getElementById("preservation").onclick = function () {console.log("保存");}}
}function load() {// 创建实例PDF = iWebPDF2018.iWebPDFFun;// PDF.StartPageVisible = false;// getPath();           //获取项目路径WebOpenUrl();Websign()// WebOpen();AddAppendTools();//PDF.AppendTools("10","保存数据库",20);HideShowBar();
}
// 从服务器上取文档并打开
function WebOpen() {if (PDF != null) {// PDF.WebUrl = path_root+"/zgbtxt/PdfServlet"// "PDFServer.jsp";//本地PDF.WebOpen("http://www.lanlv.shop/img/qjs.pdf")// // PDF.RECORDID = record_id;// // PDF.FILENAME = jzh;//"DD2017110830140074093";PDF.FILETYPE = ".pdf";PDF.USERNAME = "演示人";PDF.EXTPARAM = "0000";var ret = PDF.WebOpen();if (!ret) {PDF.Alert("文档打开失败！");}}
}
//打开网络PDF文档
function WebOpenUrl() {if (PDF != null) {PDF.WebOpenUrlFile("url");}
}
//打开签章
function Websign() {if (PDF != null) {PDF.ShowSignDlg(1);}
}/*******************************************       工具栏操作     *****************************************/
//添加工具栏按钮
function AddAppendTools(){PDF.AppendTools("10","保存数据库",20);
}//谷歌下工具栏按钮触发事件
function OnToolsClick(vIndex,vCaption){//alert('编号:'+vIndex+'\n\r'+'条目:'+vCaption+'\n\r'+'请根据这些信息编写按钮具体功能');if (vIndex==10){ PDF.Alert("测试按钮一事件！tttt");//WebSave();}}//添加自定义菜单
function AddOnMenuClick(){PDF.AppendMenu("10","测试菜单一");PDF.AppendMenu("11","测试菜单二");
}//谷歌下自定义菜单触发事件
function OnMenuClick(vIndex,vCaption){//alert('编号:'+vIndex+'\n\r'+'条目:'+vCaption+'\n\r'+'请根据这些信息编写菜单具体功能');if (vIndex==10){ PDF.Alert("自定义菜单一事件");}if (vIndex==11){ PDF.Alert("自定义菜单二事件");}
}//隐藏标准工具栏
function EnableShowTools(val){PDF.ShowTools = val;
}var nClick = 1;
//隐藏所有工具栏
function HideShowBar(){var nCount = iWebPDF2018.CommandBars.Count;nClick++;for (var i=0; i< nCount; i++){if ( 0 == (nClick%2)){iWebPDF2018.CommandBars.Item(i).Visible = false;}else{iWebPDF2018.CommandBars.Item(i).Visible = true;}}
}//显示隐藏标签页
function ShowTabBarVisible()
{if ( 0 == iWebPDF2018.Documents.Count ){PDF.Alert("没有已打开文档");return;}  if(PDF.ShowTabBarVisible==true){PDF.ShowTabBarVisible=false;}else{PDF.ShowTabBarVisible=true;}
}//显示隐藏工具栏打印按钮
function HideShowState(){    if(PDF.ShowState ==1){PDF.ShowState=0;}else{PDF.ShowState=1;}
}

当完成到这一步时,跳转会提示,接下来就是设置网络参数了

5.设置网络参数,需要和后端沟通

6.设置完成后没有问题重新打开就会提示没有插入u盘,插入加密U盘即可

注意: 跳转的时候最好带上pdf地址

前端vue集成金格科技 iwebPdf 2018中间件相关推荐

前端系列——Electron工程构建（普通工程，Vue集成）
前端系列--Electron工程构建(普通工程,Vue集成) Electron 前言创建Electron工程(npm) 1.创建项目文件夹 2.初始化 3.安装Electron环境遇到的错误完成 ...
vue 集成 sweetalert2 前端校验
文章目录 1. 集成 sweetalert2 2. 校验工具类抽象 3. 校验工具类 4. 使用 5. 效果图 6. 后端集成 1. 集成 sweetalert2 官网:https://sweetal ...
开源OA协同办公平台使用教程：O2OA如何集成金格office控件
O2OA平台是一个开源的企业办公类系统,为了方便实现在线编辑 word.excel.ppt文件,与金格iWebOfficeZZKK智能文档中间件产品在线编辑功能集成.本文主要介绍如何将O2OA集成金格 ...
基于 Docker 打造前端持续集成开发环境
知乎: https://zhuanlan.zhihu.com/p/37961402 本文将以一个标准的 Vue 项目为例,完全抛弃传统的前端项目开发部署方式,基于 Docker 容器技术打造一个精简的 ...
vue 是否有word编辑控件_GitHub - C84882428/editor-ui: vue集成 tinymce 富文本编辑器,增加导入 word 模板...
editor-ui vue 集成 tinymce 富文本编辑器自定义 tinymce 富文本编辑器, 在原来的编辑器中增加上传 word 模板最终展示效果: 主要代码: 整体思路: 1,在编辑器原 ...
利用官方的vue-cli脚手架来搭建Vue集成开发环境
在利用vue-cli脚手架搭建vue集成环境之前,我们需要先安装nodejs的环境.如果在cmd中输入node --version和npm --version出现如下的版本信息,就说明安装已经成功了. ...
如何使用Vue集成其它UI组件？如何阅读UI官网？移动端组件Vant实例教程（熬夜干货）
如何使用Vue集成其它UI组件前言一.Vant是什么? 二.基础环境准备 1.1 了解是根本 1.2 安装 1.3 引入组件 3.1 步骤一 3.2 步骤二 3.3 步骤三二.事件绑定 2.1 ...
SpreadJS与Vue集成，苏宁集团『极客办公』系统开发案例
"造极"如今已成为苏宁集团的年度核心关键词."造极"在具体工作上的体现,代表着苏宁不断追求极致的工匠精神,即对待每一个环节,都要严格要求.精益求精." ...
2022年前端Vue常见面试题大全（三万长文）持续更新
目录 1.Vue和React有什么不同?使用场景分别是什么? 2.axios是什么?怎么使用它,怎么解决跨域? 3.说说Vue,React,angularjs,jquery的区别 4.什么阶段(生命周 ...

前端vue集成金格科技 iwebPdf 2018中间件

前端vue集成金格科技 iwebPdf 2018中间件相关推荐

最新文章

热门文章