js 生成条码和打印

需求

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

研究

条形码规范

对条形码是否能显示汉字,不确定,只能研究规范了。
研究得知,条形码也就是一维码,有很多规范,所有的规范都不支持汉字,所以在条形码上边拼个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不能设置页边距,去掉页眉页脚有关。
<div class="post-text" itemprop="text"> <p>I have installed <code>Kartik mPDF</code> extension within <code>Yii framework 2.0</code>. Below is the code snippet within my controller that generates PDF file and send it to the browser.</p> <pre><code>// setup kartik\mpdf\Pdf component $pdf = new Pdf([ 'mode' => Pdf::MODE_CORE, 'format' => Pdf::FORMAT_A4, 'orientation' => Pdf::ORIENT_PORTRAIT, 'destination' => Pdf::DEST_BROWSER, // your html content input 'content' => $this->renderPartial('print-barcode'), 'cssFile' => '@vendor/kartik-v/yii2-mpdf/assets/kv-mpdf-bootstrap.min.css', 'cssInline' => '.kv-heading-1{font-size:18px}', 'options' => ['title' => 'My PDF file'], 'methods' => [ 'SetHeader'=>['My header'], 'SetFooter'=>['{PAGENO}'], ] ]); return $pdf->render(); </code></pre> <p>I have two JS files (<code>JsBarcode.js</code> and <code>CODE128.js</code>) which can be found here <a href="https://github.com/lindell/JsBarcode" rel="nofollow">https://github.com/lindell/JsBarcode</a> To generate barcode I need to include these JS files and my custom JavaScript code. In my view, I normally include those files as follows (my <code>print-barcode.php</code>).</p> <pre><code><?php $this->registerJsFile(Yii::$app->urlManager->baseUrl . '/js/JsBarcode.js', ['depends' => [\yii\web\JqueryAsset::className()]]); $this->registerJsFile(Yii::$app->urlManager->baseUrl . '/js/Code128.js', ['depends' => [\yii\web\JqueryAsset::className()]]); $jsGenerateBarcode = 'My custom Javascript code goes here ...'; $this->registerJs($jsGenerateBarcode, $this::POS_END); ?> </code></pre> <p>All the included JavaScript code does not have any effect at all, since it is a PDF file and not a webpage. How can I print the barcode generated by <code>JsBarcode.js</code> and by <code>CODE128.js</code> and pass it on the PDF file which is generated by <code>kartik\mpdf\Pdf;</code>?</p> </div>
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页