使用JSBarCode创建条形码

时间:2017-10-27 20:07:48

标签: node.js express html5-canvas barcode

我正在使用JSBarCode尝试为资产生成条形码。我需要能够创建一个静态条形码,然后我想我可以自己获得动态部分。到目前为止,我的代码是从上面链接中找到的文档中直接复制的。我认为文档将提供一个工作示例来关闭我的代码。也许我的代码错了,我有下面的代码,我已经为jsbarcode和canvas完成了NPM安装。

服务器端代码:

var JsBarcode = require('jsbarcode');
var Canvas = require("canvas");

var canvas = new Canvas();
JsBarcode(canvas, "Hello");
JsBarcode(".barcode").init();

HTML:

<svg class="barcode"
  jsbarcode-format="upc"
  jsbarcode-value="123456789012"
  jsbarcode-textmargin="0"
  jsbarcode-fontoptions="bold">
</svg>

当我尝试运行我的节点应用程序时出现错误。它很长,对我来说并没有多大用处,但希望你们其中一个人能够理解它。这是:

/home/ubuntu/workspace/asset-management/node_modules/jsbarcode/bin/help/getRenderProperties.js:84
        var selector = document.querySelectorAll(string);
                                ^

ReferenceError: document is not defined
    at querySelectedRenderProperties (/home/ubuntu/workspace/asset-management/node_modules/jsbarcode/bin/help/getRenderProperties.js:84:26)
    at getRenderProperties (/home/ubuntu/workspace/asset-management/node_modules/jsbarcode/bin/help/getRenderProperties.js:37:10)
    at JsBarcode (/home/ubuntu/workspace/asset-management/node_modules/jsbarcode/bin/JsBarcode.js:63:60)
    at Object.<anonymous> (/home/ubuntu/workspace/asset-management/server/index.js:31:1)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/home/ubuntu/workspace/asset-management/server.js:4:11)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:389:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:504:3

如果您对可以阅读和生成自定义条形码的更好的软件包有任何建议,请告诉我,以便我可以查看。

2 个答案:

答案 0 :(得分:0)

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/ASL/AADeAAAA/gAAAAIAAAD+AAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAh6QEAZKdo54AAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/Af//AAABAAAA/wAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAcjEDAghkmFUAAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/Af//AAABAAAA/wAAAAAAAAABAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAckoDA0TA9lYAAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/AQD/AAAAAAAA/wAAAAAAAAABAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAASU4CA+16cNAAAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/AQD/AAD/AAAAAQAAAAAAAAD/AAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAZjkDAtle3bIAAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/Af//AAABAAAAAAAAAAAAAAD/AAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAajkDAr7LFAwAAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/Af//AAABAAAA/wAAAAEAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAck4DAxY8F10AAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/Af//AAAAAAAAAQAAAP8AAAABAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAbkoDA3iPVH4AAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/AQD/AAAAAAAA/wAAAAAAAAABAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAASU4CA+16cNAAAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/AQD/AAD/AAAAAAAAAAEAAAD/AAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAZjUDAmZGozoAAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/Af//AAABAAAAAAAAAAAAAAD/AAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAajkDAr7LFAwAAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/AQD/AAAAAAAA/wAAAAEAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAASVICA62zYxMAAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/AQD/AAD/AAAAAAAAAAEAAAD/AAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAZjUDAmZGozoAAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/Af//AAABAAAAAAAAAP8AAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAbjUDAlvFFR8AAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/AQD/AAAAAAAAAAAAAP8AAAABAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAARVICA/z3WM0AAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/Af//AAAAAAAAAQAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAUU4CA1nljTgAAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/Af//AAABAAAAAAAAAP8AAAABAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAbk4DAxdhexwAAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/AQD/AAAAAAAA/wAAAAEAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAASVICA62zYxMAAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/AQD/AAD/AAAAAQAAAP8AAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAajUDAvnk9E4AAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/AQD/AAAAAAAA/wAAAAAAAAABAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAASU4CA+16cNAAAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/AQD/AAAAAAAA/wAAAAAAAAABAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAASU4CA+16cNAAAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/Af//AAABAAAAAAAAAP8AAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAbjUDAlvFFR8AAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/AQD/AAD/AAAAAAAAAAEAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAATU4CA7CME0sAAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/AQD/AAD/AAAAAQAAAAAAAAD/AAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAZjkDAtle3bIAAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/Af//AAABAAAA/wAAAAAAAAABAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAckoDA0TA9lYAAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/AQD/AAAAAAAA/wAAAAAAAAABAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAASU4CA+16cNAAAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/AQD/AAD/AAAAAQAAAAAAAAD/AAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAZjkDAtle3bIAAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/Af//AAABAAAAAAAAAAAAAAD/AAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAajkDAr7LFAwAAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/Af//AAABAAAA/wAAAAEAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAck4DAxY8F10AAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/AQD/AAD/AAAAAQAAAP8AAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAajUDAvnk9E4AAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/AQD/AAAAAAAA/wAAAAAAAAABAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAASU4CA+16cNAAAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/AQD/AAD/AAAAAAAAAAAAAAABAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAATUoCA+Jw8kAAAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/ASL/AADeAAAA/gAAAAIAAAD+AAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAh6QEAZKdo54AAAAASUVORK5CYII=" width="5" height="70"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAQAAADLaIVbAAAANUlEQVQIHQEqANX/AQD/AAAAAAAA/wAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAASTUCAqHeHtMAAAAASUVORK5CYII=" width="5" height="70">

我在2014年建立了一个代码生成Code128的小条形码生成器。我正在吹掉代码上的灰尘并将其放在codepen上。它是100%客户端,普通的香草Javascript。没有jQuery,没有库,没有字体,没有必要的服务器。您可以从拇指驱动器断开连接。所有条形码都由浏览器生成。

old code应该可以在任何支持javascript的浏览器中运行,并且它会生成HTML“img”标签,因此结果是您可以嵌入“div”并显示在页面上,即使客户端具有JS关掉了。这都是麻省理工学院的许可证,因此无论有没有U / I,您都可以免费下载和使用。

我正在制作一个打印出条形码的应用程序,所以如果你一直在进行条形码发布,请继续关注。

答案 1 :(得分:0)

您可以使用jsBarcode library来查看下面的演示

&#13;
&#13;
JsBarcode(".barcode").init();
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.8.0/JsBarcode.all.js"></script>
<svg class="barcode" jsbarcode-format="upc" jsbarcode-value="012345678912" jsbarcode-textmargin="0" jsbarcode-fontoptions="bold">
        </svg>
&#13;
&#13;
&#13;