web前端二维码打印模板编辑

工作需要，为了实现类似二维码打印软件的功能，尽力了。

基于hiprint开源插件修改而来，实现了二维码模板在线编辑、保存、预览、打印，批量打印、自动分页

官网地址：http://www.hinnn.com/

话不多说

直接从官网拿下来基本没问题（有问题也没办法，像我这直接把官网例子页面拿下来改造后才能正常实现各种功能)>_<

我的修改完成大概是这个样子，下面开始讲解具体实现方式和功能实现思路

首先保证所有js、css正常加载，插件初始化完成，初始化模板可自定义（默认A4），paperType值在核心js中有定义，后面说在哪里新增修改

hiprintTemplate = new hiprint.PrintTemplate({
                template: { "panels": [{ "index": 0, "paperType": "B5", "height": 176, "width": 250, "paperHeader": 0, /*"paperFooter": 400,*/ "printElements": [], "paperNumberLeft": 134, "paperNumberTop": 119 }] },
                settingContainer: '#PrintElementOptionSetting',
                paginationContainer: '.hiprint-printPagination'
});

图片控件需要到hiprint.bundle.js的

这个地方把本地存放图片的url用base64转码后放进来，不然加载不到

保存模板

首先操作方式不介绍了，添加好具体模块后使用hiprintTemplate.getJson()可以将页面自定义控件转化为json格式存到数据库，建议建一个模板表我的表结构（indexs是因为index敏感字符）

转化为json后是这种数据

模板当然是没有数据的，只保存格式，ajax传递到后台遍历将title值清空即可。这里只需要注意textType类型，不同类型属性字段不同，遍历解析大家都会，就不写出来了

如果想在编辑的时候画布按默认值展现，保存时以实际应用大小保存则在页面初始化的时候设定好所需要的画布大小

这里新增自己想要的大小，然后到hiprint.bundle.js中1784行新增自己自定义的大小，否则会无法识别

点击保存时弹出窗口输入模板名称然后转为json，ajax传到后台后，heiget和width还是初始化时的大小，paperType已经为你点击设置的参数了，判断paperType例如为B9将heiget和width分别设置为你想要的大小，再存入数据库即可

这里有个细节，如果有需要批量打印，则在初始化时把页眉线为0，页脚线为空，页脚线会自动为默认纸张最大长度

编辑模板

打开编辑模板页面时把id传过来，js初始化时判断id存在ajax请求根据id查询到模板，把height和width设置为自定义大小

，ajax接收到结果使用

hiprintTemplate = new hiprint.PrintTemplate({
	template: data,
	settingContainer: '#PrintElementOptionSetting',
	paginationContainer: '.hiprint-printPagination'
});
$('#hiprint-printTemplate').html('');
hiprintTemplate.design('#hiprint-printTemplate');

解析到页面，这个地方官方封装的js很友好，就算是多了一些其他字段也能正常解析出来（别问我怎么知道的），但是如果符号错误json解析会报错

一定要注意这两个地方，如果出现双引号就会解析失败，编辑保存跟保存一样，就不多说了

批量打印

bootstrap table表格批量选中，获取选中列的id后layer.open跳转到选择模板页面选择模板获取选中列id跳转编辑模板页面展示

注意：

选择模板后跳转到编辑模板页面前需要将两个选中列的值都传递到编辑模板页面，在编辑模板页面js初始化中判断不为空ajax传递到后台，先根据模板id查询模板取出遍历模板，将需要生成二维码的id存入模板中，最终返回到前端解析展现

然后选中打印或者导出pdf都可以

这里打印分页是个坑，我一直以为每个"options"存放控件后会自动分页，最终被折磨的遍体鳞伤，后来发现每一个"panels"是一个页面，插件会根据panels自动分页，下面是我的一个最终分页数据

{"panels":[{"index":0,"height":24,"width":48,"paperHeader":0,"paperFooter":68,"printElements":[{"options":{"left":9,"top":7.5,"height":37.5,"width":37.5,"title":"99930","textType":"qrcode"},"printElementType":{"type":"text"}},{"options":{"left":55.5,"top":19.5,"height":15,"width":66,"title":"06号楼3层UPS室1排1列-Blokset"},"printElementType":{"type":"text"}}]},{"index":0,"height":24,"width":48,"paperHeader":0,"paperFooter":68,"printElements":[{"options":{"left":9,"top":7.5,"height":37.5,"width":37.5,"title":"99931","textType":"qrcode"},"printElementType":{"type":"text"}},{"options":{"left":55.5,"top":19.5,"height":15,"width":66,"title":"06号楼3层UPS室1排2列-Blokset"},"printElementType":{"type":"text"}}]},{"index":0,"height":24,"width":48,"paperHeader":0,"paperFooter":68,"printElements":[{"options":{"left":9,"top":7.5,"height":37.5,"width":37.5,"title":"99932","textType":"qrcode"},"printElementType":{"type":"text"}},{"options":{"left":55.5,"top":19.5,"height":15,"width":66,"title":"06号楼3层UPS室1排3列-Blokset"},"printElementType":{"type":"text"}}]},{"index":0,"height":24,"width":48,"paperHeader":0,"paperFooter":68,"printElements":[{"options":{"left":9,"top":7.5,"height":37.5,"width":37.5,"title":"99933","textType":"qrcode"},"printElementType":{"type":"text"}},{"options":{"left":55.5,"top":19.5,"height":15,"width":66,"title":"06号楼3层UPS室1排4列-Blokset"},"printElementType":{"type":"text"}}]}]}

以后发现未提到后续再补充....