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