IT虾米网

js 生成条码和打印详解

flyfish 2021年06月15日 编程语言 212 0

需求

条形码上边显示汉字,下边显示码值,如下图。
这里写图片描述

研究

条形码规范

对条形码是否能显示汉字,不确定,只能研究规范了。
研究得知,条形码也就是一维码,有很多规范,所有的规范都不支持汉字,所以在条形码上边拼个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不能设置页边距,去掉页眉页脚有关。

发布评论
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

js 数值 精确运算详解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。