snk-browser-helper-print v0.1.3
snk-browser-helper-web
打印助手： 浏览器用PDF.JS展示PDF，当直接打印时，针式打印机清晰度不足，需要插件进行辅助，此为浏览器与插件进行交互的前端项目 方案是通过打印助手打印word文档，针式打印机打印PDF都不理想
相关文件
// 功能入口文件
src/browserHelper/index.js
// 共用流程主文件
src/browserHelper/dialog.js
// 提示文件 其中包含安装引导提示
src/browserHelper/message.js
// 打印主文件 其中包含安装引导提示
src/browserHelper/ajax-printer.js建立http链接 以及 唤起java打印助手应用
通过轮询握手的机制去检测唤起本地应用,并展示相关安装指引
采用的是 https 建立和本地webservice
1.1 用户没有安装助手应用
第一次创建http连接，失败，第二次创建http连接,并且通过URL protocol尝试唤起助手。因为没有安装助手，所以直到最大的轮询次数也不会成功，所以弹出页面提示让用户下载助手应用进行安装并重试
1.2 用户已经安装助手应用 但是助手没有运行
第一次创建http连接，失败，第二次创建http连接,并且通过URL protocol尝试唤起助手。第一种情况助手在若干秒被唤起，后续并成功建立连接，则不再进行尝试http连接，正常进入逻辑。第二种情况助手没有被正常唤起，可能原因如下：
- 1.安装的时候写入URL protocol 注册表失败
- 2.IE浏览器安全机制限制
在第二种情况没有被唤醒，则也会在web界面弹出UI提示，提示如果用户有安装助手插件，让用户手动点击运行，并重试。在用户安装过程中如果被杀毒软件阻止了，需要允许相关操作。不然会导致URL protocol注册表写入失败。
1.3 用户已经安装助手应用 但是助手正在运行
一般在第一次创建http连接就会成功，这就是为什么第二次尝试才去唤起app的原因，这样可以提升用户体验，第一次建立成功，就不再去唤起app 也不会在web显示浏览器的是否打开URL protocol的提示。
1.4 唤起JAVA插件
在助手安装过成中 会写入URL protocol, 代码通过
`haprinthandler://?port=${port}&action=${action}&env=${env}&wss=${wss === 'true'?'true':'false'}`;haprinthandler就是约定的URL protocol名称
1.5 成功后实例化具体业务
当建立好了http便根据调用参数，去实例化上传助手。
1.6 文件 message.js
这个文件主要用于安装指引提示，公用部分的错误指引提示。也包括了一些文件下载链接，修复文件的下载链接。
this.dowloadURL
助手的下载链接
this.VCPlusPlusURL
C#执行环境还会依赖vc++ vc_redist.x86 2015以上的版本，如果报相关错，则会提示用户下载修复。
相关文件
// 功能入口文件
src/browserHelper/index.js
// 共用流程主文件
src/browserHelper/dialog.js
## 上传助手打包发布
1、script 引入
npm run build
会在dist目录下生成一个snkwebbrowserhelper.js 文件，相关项目引入该文件即可
2、import 引入
npm run buildlib npm publish npm install snk-browser-helper-print ===》 import
调用
// 调用
import SNKBrowserHelper from 'SNKBrowserHelper';
SNKBrowserHelper.callAjaxPrint({
env: 'pro', // 此参数暂时未启用
wss: 'false',
// 下载插件的域名地址 hostUrl + '/x86/printHandler.exe' 或 hostUrl + '/x64/printHandler.exe'
hostUrl: `${Common.host}/res/api/anysign-web/print/exe/`,
initParams: { urlData: newData, index: Common.curentFileIndex }, // 初始化打印的word文档链接
ok: ({ result }) => {
console.log(result);
},
});项目结构
BROWSER-HELPER-WEB
| package.json
| readme.MD
| server.js 项目启动脚本，包含一些取未占用端口逻辑，并启动webpack-dev-server
| webpack.config.js webpack配置文件
|
+---dist 打包文件
| browserHelper.html
| browserHelper.js
| snkwebbrowserhelper.js 需要被引入项目的代码
|
\---src
|
+---browserHelper
| | commonLayout.js 公用界面
| | index.js 声明了调用方法的入口文件
| | index.less
| | message.js 安装指引提示，安装错误提示
| | protocolcheck.js 通过URL protocol唤起app的兼容性类
| |
|
+---components
| +---dom
| | index.js 基础的dom操作
| |
| +---popview 弹出框
| | confirm.js
| | index.js
| | index.less
| |
| +---slide 图片预览滑动组件
| | | index.js
| | | index.less
| | | util.js
| | |
| | +---item
| | | imageItem.js
| | | index.js
| | | notSupportItem.js
| | | pdfItem.js
| | | videoItem.js
| | |
| | \---thumbBar
| | index.js
| | thumbItem.js
| |
| \---tree 左侧树状组件
| | index.js
| | index.less
| | popTree.js
| | tree.js
| |
| \---components
| | treeItem.js
| | treeSection.js
| |
| \---popover
| index.js
| index.less
|
\---entry 当前项目的启动入口
\---browserHelper
index.html
index.js
index.less