前言:
作为一个练习的小项目,自我感觉几番波折。现在做到不到两周时间,对我这个只接触编程行业几个月的菜鸡,也颇有收获。
一、
首先,在基本毫无想法的基础上开始了摸索之旅。
写了几张的需求分析,感觉整个东西不大好做,主要原因是大脑基本处于空白。
基本确定了以下的三步:
- 能够打印固定的模板。
- 动态打印。
- 数据导入打印。
在没有什么把握的情况下,编写了项目进度计划(等于没什么计划)。
想要先要调用打印机,于是各种baidu怎么调用打印机,三天时间下来,后台调用打印机的想法成空,最终使用前端技术,还是调用了浏览器的打印功能,相当于window.print()解决了一切。
二、
因为想着要做一个,标签设计,即就是能够设计模板的软件,想了各种方法,看了网上各种标签设计的软件,自我能力评估感觉完成不了。最终确定了使用模板打印,而不是设计模板,感觉这个是可以做的,但是其中还有一些小问题需要解决。
建了一个自我认为有层次的目录结构,作为前端的项目。自此开始了前端的旅途。
lib目录下引入了jquery、bootstrap、jquery-ui、jqueryArea,src目录下存放开发写的相关文件。原本是打算做一个简单的主页面,将三个模板的操作在这个主页面显示。三个模板页面写的还相对顺利,基本完成之后,结果在使用iframe标签时碰到了页面间传值的问题。在研究了大半天的时间后无果,听取前端人员的建议,最终还是将三个页面直接整合在了一个页面 上。
在整合时感觉三个页面分别按照自己的模板录入数据时,太次于是花费了大半天的时间,研究了整合成为一个三个表单共用一个表单录入数据,这样看起来就稍微漂亮一点。
三、
最难解决的部分属于打印时样式的控制。
- 打印整页和打印数据
打印整页比较好搞定,打印数据相当于是要搞定套打。
这个套打着实费了一波脑力,最终通过打印时控制标签的透明度,扣出了数据。 - 保证打印的数据和打印出的模板位置对住
解决办法:将数据放到<span>,将<span>变为行内块元素,设置元素下边框显示,并设置长度一定,这样的话无论数据模板要填入的位置在哪里,数据都会与之对应在哪里显示,不会随意改变位置。这样就保证了套打的位置正确性。
四、
基本上到这里,打印的这个基本功能就达到我的预期,只是页面设计上还是有比较大的缺陷。
对于前面iframe的页面传值还是有相当兴趣研究的,因为我个人觉的好多东西放在一个页面总显得很乱,我利用周末时间好好研究了一下这个东东,发现这个东东可以解决。
但是对于这个小项目暂时就不再去做改动了。因为无聊的工作量。
这里奉上解决iframe页面传值的demo(别人的项目地址):
http://biqing.github.io/MessengerJS/