2013-05-11 03:18题主

[示例]自定义打印模板,非常实用的一个功能,完整放出

前言:因为之前有群友问到该功能,所以我特别做了一次整理

无图无真相,首先看看图片吧:



好了,看过截图如果还不明白这是什么东东的同学,我无能为力了。

1、先说说数据库部分,需要建立一个表用于存储打印模板,为了通用,我提供只表结构,很简单,自己新建一个就行
表名如果不一致,请改动我源码中的相应地方,此处不做具体说明。

注意:运行我提供的示例,需要自己新建一个模板,用于配合示例,如下图所示,编号和内容最好一致,不过你可以自己做修改!!

提供的模块列表如下:

其中[打印预览公共模块]是一个可重用的打印公共模块,具体使用方法大家先自己摸索看我的示例,以后我再详细说明

文件下载:
kindeditor.zip:该包解压后放置在webbuilder/res目录(如不存在,可新建一个目录)
打印模板.gz:使用WebBuilder IDE的导入功能直接导入即可

目前存在BUG,就是关于列表循环的问题,因为编辑器在切换源码和可视化编辑的时候,会自动格式化源码,并且移除掉非法标签,如:<tpl for="DETAILS">...</tpl>,具体以后再做说明吧,时间晚了,睡觉~


2013-05-11 03:24#1
模板里面的特殊语法请参考Ext.XTemplate,不过必须在源码视图里面使用哟,切记,循环标记的BUG会存在于嵌套标签内,不如你循环<tr></tr>标签,切换之后会自动移除出<table>标签,不过如果在源码状态保存无上述问题!
2013-05-11 03:29#2
再分享一个内容,可以实现精确打印哟:
http://cz1.me/post/12
2013-05-11 09:58#3
谢谢 冷面四喜,好同志,功能做的非常强大!
2013-05-11 10:20#4
SQL SERVER 建表的SQL脚本可使用:


2013-05-11 11:45#5
多谢分享,学习了
2013-05-11 13:18#6
支持自定义纸张,分页吗
2013-05-11 17:12#7
感谢分享,下载学习。
2013-05-12 13:22#8
这个必须要顶一下,冷面四喜把界面皮肤分享一下吧,谢谢了
2013-05-12 17:41#9
@liutt1001 界面换肤功能我已经分享过了哈,可以查看我以前分享的帖子
2013-05-12 17:50#10
好帖 学习了~
2013-05-13 09:08#11
功能非常棒!学习了。
2013-05-13 14:42#12
四喜兄,请教一下,在调用预览界面,模板及数据可以获得并显示,但在最后的打印界面,无法显示模板数据。这可能是什么原因呢?
2013-05-13 16:40#13
@moonshine 软件包已经更新,请重新下载。
2013-05-13 18:20#14
谢谢四喜兄,新代码测试没问题。
再次感谢!
2013-05-14 14:16#15
导入进来有问题,提示“A JSONObject text must begin with '{' at character 2
2013-05-14 14:27#16
使用Import and Merge Modules功能导入(不是点下拉菜单的Import to Current Opened Module导入)

2013-05-15 10:46#17
关于XTemplate的tag<tpl for="DETAILS">...</tpl>自动移除的问题,可使用其它tag来替代
<span class="tpl" for="DETAILS">...</span>,然后调用的时候再还原就行了,还原的时候用正则匹配替换。

2013-05-15 21:02#18
顶一下!
2013-05-16 11:46#19
四喜兄,请教一下。
你截图中,表的数据如何获取呢?
2013-05-16 12:06#20
使用HTML编辑器配置好Ext.XTemplate后,可直接把DataProvider获取到的数据库数据填充到该模板中,并最终输出到容器或iframe来展现并打印。


2013-05-17 11:33#21
XTemplate的<tpl for="rows"> for表示按rows节点中的数组遍历循环吧
2013-05-18 21:56#22
打印的结果好像不太好 整个页面都打印了,楼主能否再改改
2013-05-19 00:40#23
OK
2013-05-19 13:44#24
打印的时候使用<body onload="this.focus(); this.print();">

2013-05-19 17:16#25
mark,学习
2013-05-21 19:03#26
打印内容也可以在后台处理好后,再直接输出打印
2013-05-25 13:26#27
好帖一定要顶起来
2013-05-27 20:09#28
IE打印时需要使用<body onload="this.focus(); this.print();">的方法,否则打印是全屏
2013-05-29 17:58#29
to tulip:
<body onload="this.focus();this.print();">是自动打印吗?
2013-08-03 12:10#30
这个代码就是表示加载的时候自动打印啊
2014-01-18 17:44#31
今天用到了 发现四喜兄弟太热心了。
2014-03-18 11:17#32
关于四喜说的保存时会移除非法标签的情况,其实kindeditor是可以解决的,方法:
在下载包里的kindeditor中的 【kindeditor/extWithKineditor.js】这个文件的第10行,也就是
this.editor = KindEditor.create....这行的前面,加上一句:

KindEditor.options.filterMode = false;

就可以保留所有的标签了,不会因为切换源码状态而丢失非法标签。
2014-03-23 13:42#33
感谢 Coldstone 你这个解决方案 完善了四喜兄的自定义打印模版。

值得收藏

2014-03-23 14:11#34
测试了一下,这个方法不能解决问题。不过还是很感谢 提供了一个思路。
2014-08-05 09:59#35
那个模版中的表格是自己画吗?

返回开发者社区