需求
条形码上边显示汉字,下边显示码值,如下图。
研究
条形码规范
对条形码是否能显示汉字,不确定,只能研究规范了。
研究得知,条形码也就是一维码,有很多规范,所有的规范都不支持汉字,所以在条形码上边拼个div来显示汉字,另外基于研究资料决定使用128规范,因为Code 128支持所有ASCII字符,也就是说,所有的ASCII字符都可以在二维码上显示出来,支持的字符最多、最全,当然它只支持ASCII所以,汉字肯定不行。
js条形码库
决定了使用128规范,去github上找了一个优秀的条码库JsBarcode,小巧玲珑,易用,并且默认的编码格式就是128。
js打印插件
条码生成的问题搞定了,接下来要打印,需求是打印条码,条码就是一张图片,问题可以理解为打印html,后来决定使用jQuery.print,因为这个可以应用打印样式,相对好控制一些。
打印样式的原理就是,将打印样式应用到元素上,跟元素现有的属性merge后就是最终打印样式。为了美观,先将div隐藏(display:none),然后,在打印样式中再设置display:block
,结果不work,大胆设想了一下,打印样式的原理就是两种样式的merge,因为优先级别一样,所以打印样式被之前样式覆盖,为了提高css优先级别,将打印样式设置为,display:block !important
,打印正常了。
问题
- 在去掉浏览器边距的情况下,页边距(padding、margin)可以通过css控制,可以正常打印,但是通过js控制边距的方法还没找到。
- 浏览器不兼容,在chrome下打印正常了,但是在firefox下打印不正常,这可能跟firefox不能设置页边距,去掉页眉页脚有关。
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/20315.html