使用JSBarCode创建条形码

Question

我正在使用JSBarCode尝试为资产生成条形码。我需要能够创建一个静态条形码，然后我想我可以得到动态部分自己。到目前为止，我的代码是从上面链接上找到的文档中直接复制的。我认为，这些文档会给出一个工作示例，作为我的代码的基础。也许我做错了代码，下面有代码，我已经为jsbarcode和画布完成了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

如果你有更好的建议，可以阅读和生成自定义条形码，请让我知道，以便我可以调查。

Answer 1

​

/*
* 提示：该行代码过长，系统自动注释不进行高亮。一键复制会移除系统注释 
* <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。我正在清除代码中的灰尘，并将其放到码页上流通。这是100%的客户端，普通的香草Javascript。没有jQuery，没有库，没有字体，没有服务器。你可以运行它断开从一个拇指驱动器。所有条形码都由浏览器生成。

旧码应该可以在任何支持javascript的浏览器中工作，它会生成HTML标记，因此，即使客户端关闭了JS，您也可以将其嵌入到"div“中并在页面上显示。这都是麻省理工学院的许可，所以你可以免费下载和使用，无论有没有U/I。

我正在开发一个打印条形码的应用程序，所以如果你在做条形码发布的话，请继续关注。