前端菜鸟记一次针式打印机打印出库单问题心历路程

844 阅读4分钟

背景:此次问题出现在仓储系统重构之后,由Angular4.0重构成Vue3.0,Angular版本使用之前的essence-ng2-print插件,而Vue版本使用Vue3-print-nb,通过测试发布上线后;在测试期间一直使用的是公司里的喷墨/激光打印机,而仓库实际使用的则是针式打印机

问题:在Angular版本使用针式打印机打印出库单,打印清晰,边框正常,文字正常;在Vue版本使用针式打印机打印出库单,没有边框显示,文字模糊,同时排版样式有所变形

在一开始的时候遇到这个问题的时候,其实一直纠结在是代码有哪里写的不好,或者是vue3-pring-nb这个依赖有问题还是自己写的样式不对;先是不停的修改样式,直接跳过了测试环节,直接发线上,让仓库那边测试打印效果(毕竟在公司里也没有针式打印机可以测试),但是效果一直没有改善(其实边框缺失和样式有关,但是这个时候已经开始暴躁思考方向已经不对);

后来是想可能是相关插件依赖的问题,开始注释修改代码,使用新的插件去进行打印操作,换了html-to-page,发现还是不行后换了print-JS,但最后都以没有解决问题告终。把代码恢复成原始上线代码后,开始仔细阅读vue3-print-nb的文档,给printObj加extraCss等,但最后结果却没有变化。而时间却已经过去了一天。这个时候崩溃的情绪快积压到顶点。这个晚上没有选择加班,出去吃了个饭,去了趟医院,打车回去的时候和司机天南海北的聊,希望能冲淡一些负面的情绪。

经过一晚上的消化,今天来了之后情绪好转,开始让自己发散思维。因为看仓库反馈打印的出库单,其实样式并没有丢失,只是边框没有打印出来,另外字体模糊和部分变形,会不会是另外的原因导致的。又想自己打印测试的时候都是用A4的白纸,会不会是仓库那边纸的颜色和边框的样式相近,所以看着没有打印出边框。于是改了边框颜色,从原来的#DDD修改为#000,再让仓库那边打印,果然边框已经打印出来了,但是文字模糊和部分样式变形的情况还存在,但至少已经解决了一个问题。

其实对于大部分的普通人来说,打印真的只是单纯的打印,在打印预览页面上很多设置并不是太明白,因为正常打打印已经可以满足我们绝大多数需求了。而我之前也是上述的普通人中的一员。直到实在没有思路的时候,我打开了打印预览中的更多设置,这个时候我对这里面的设置项还是很敬畏的,不敢随意去改动,因为不知道什么意思改了什么效果。而处于好奇我找度娘问了一些打印质量中的dpi是什么意思,才知道这个值越高打印之类越清晰,我把值调低了之后果然出现了和仓库反馈一样的文字模糊效果。顺便问了一些仓库那边设置的dpi是70,我一看比我今天搞到的针式打印机最小的值还小,能不模糊吗?而至于最后变形的问题,发现是仓库那边设置了自定义缩放的原因导致的。因为打印的内容里有一部分我宽度设置了100%。所以进行缩放之后那部分内容就凸出来造成了变形,只要修改样式宽度和其他位置的一样即可。这个时候按照已经有的内容和思路按部就班下去基本都能解决这次出现的问题了

而这个问题其实不难,也不是什么大问题,但是却浪费了我两天的时间。这个时候感觉到作为一名程序员,其实对正常的逻辑思维能力有要求之外。还需要在适当的时候进行发散思维,因为很有可能遇到的问题就在你想不到在你认为是不可能的原因造成的。这里该对自己进行深刻的反思,理所当然是一个很不好的习惯。

PS:这里其实还留下了一个疑问,留待以后有更多空余的时间去研究:为什么在Angular版本中一样的打印设置,打印出来出库单却是清晰可用的;而在Vue版本中一样的打印设置却会造成文字模糊?

谨记程序开发中不能想当然,因为没有验证;要发散思维,因为容易错过正解。致自己。