js 生成条形码

ゝ一纸荒年。 2023-09-26 17:41 169阅读 0赞

简介:

通过js生成条形码

效果展示:

d43c53013f754d3bb33095c774dd9bd7.png

示例代码:

  1. <!--
  2. Created by IntelliJ IDEA.
  3. User: songsir
  4. Date: 2018/11/26
  5. Time: 10:49
  6. -->
  7. <!DOCTYPE html>
  8. <html lang="en">
  9. <head>
  10. <meta charset="UTF-8">
  11. <title>JS生成二维码</title>
  12. <script src="js/barcode.js"></script>
  13. <script src="js/jQuery.js"></script>
  14. <style>
  15. .barcode { margin-top: 20px; text-align: center}
  16. .barcode + * { clear:both}
  17. #barcode { white-space: nowrap; zoom: .5;/* -webkit-transform: scaleX( .5); transform: scaleX(.5);*/}
  18. #barcode div { display: inline-block; height: 120px}
  19. .barcode .bar1 { border-left:2px solid black}
  20. .barcode .bar2 { border-left:4px solid black}
  21. .barcode .bar3 { border-left:6px solid black}
  22. .barcode .bar4 { border-left:8px solid black}
  23. .barcode .space0 { margin-right:0}
  24. .barcode .space1 { margin-right:2px}
  25. .barcode .space2 { margin-right:4px}
  26. .barcode .space3 { margin-right:6px}
  27. .barcode .space4 { margin-right:8px}
  28. .barcode label { clear:both; display:block; text-align:center; font: 16px/34px helvetica}
  29. </style>
  30. </head>
  31. <body>
  32. <div class="barcode code-box">
  33. <div id="barcode"></div>
  34. </div>
  35. <script>
  36. $(function () {
  37. // showDiv:代表需要显示的divID,
  38. // textVlaue : 代表需要生成的值,
  39. // barcodeType:代表生成类型(A、B、C)三种类型
  40. createBarcode('barcode', 'http://127.0.0.1:8094/msg/details/forward?forwardUrl=am81elBVSjYzMVkxR252RzNEZkNqMG5HNnhuTmRBaGU=', 'B')
  41. // createBarcode('barcode', 'hello', 'B')
  42. });
  43. </script>
  44. </body>
  45. </html>

barcode.js

  1. /**
  2. * @Description 生成条形码
  3. * @Auther songsir
  4. * @Date 2018/11/26
  5. */
  6. /*****************************************************************start*****************************************************/
  7. (function () {
  8. if (!exports) var exports = window;
  9. var BARS = [212222, 222122, 222221, 121223, 121322, 131222, 122213, 122312, 132212, 221213, 221312, 231212, 112232, 122132, 122231, 113222, 123122, 123221, 223211, 221132, 221231, 213212, 223112, 312131, 311222, 321122, 321221, 312212, 322112, 322211, 212123, 212321, 232121, 111323, 131123, 131321, 112313, 132113, 132311, 211313, 231113, 231311, 112133, 112331, 132131, 113123, 113321, 133121, 313121, 211331, 231131, 213113, 213311, 213131, 311123, 311321, 331121, 312113, 312311, 332111, 314111, 221411, 431111, 111224, 111422, 121124, 121421, 141122, 141221, 112214, 112412, 122114, 122411, 142112, 142211, 241211, 221114, 413111, 241112, 134111, 111242, 121142, 121241, 114212, 124112, 124211, 411212, 421112, 421211, 212141, 214121, 412121, 111143, 111341, 131141, 114113, 114311, 411113, 411311, 113141, 114131, 311141, 411131, 211412, 211214, 211232, 23311120]
  10. , START_BASE = 38
  11. , STOP = 106;
  12. function code128(code, barcodeType) {
  13. if (arguments.length < 2)
  14. barcodeType = code128Detect(code);
  15. if (barcodeType == 'C' && code.length % 2 == 1)
  16. code = '0' + code;
  17. var a = parseBarcode(code, barcodeType);
  18. return bar2html(a.join('')) + '<label>' + code + '</label>';
  19. }
  20. function bar2html(s) {
  21. for (var pos = 0, sb = []; pos < s.length; pos += 2) {
  22. sb.push('<div class="bar' + s.charAt(pos) + ' space' + s.charAt(pos + 1) + '"></div>');
  23. }
  24. return sb.join('');
  25. }
  26. function code128Detect(code) {
  27. if (/^[0-9]+$/.test(code)) return 'C';
  28. if (/[a-z]/.test(code)) return 'B';
  29. return 'A';
  30. }
  31. function parseBarcode(barcode, barcodeType) {
  32. var bars = [];
  33. bars.add = function (nr) {
  34. var nrCode = BARS[nr];
  35. this.check = this.length == 0 ? nr : this.check + nr * this.length;
  36. this.push(nrCode || ("UNDEFINED: " + nr + "->" + nrCode));
  37. };
  38. bars.add(START_BASE + barcodeType.charCodeAt(0));
  39. for (var i = 0; i < barcode.length; i++) {
  40. var code = barcodeType == 'C' ? +barcode.substr(i++, 2) : barcode.charCodeAt(i);
  41. converted = fromType[barcodeType](code);
  42. if (isNaN(converted) || converted < 0 || converted > 106) throw new Error("Unrecognized character (" + code + ") at position " + i + " in code '" + barcode + "'.");
  43. bars.add(converted);
  44. }
  45. bars.push(BARS[bars.check % 103], BARS[STOP]);
  46. return bars;
  47. }
  48. var fromType = {
  49. A: function (charCode) {
  50. if (charCode >= 0 && charCode < 32) return charCode + 64;
  51. if (charCode >= 32 && charCode < 96) return charCode - 32;
  52. return charCode;
  53. },
  54. B: function (charCode) {
  55. if (charCode >= 32 && charCode < 128) return charCode - 32;
  56. return charCode;
  57. },
  58. C: function (charCode) {
  59. return charCode;
  60. }
  61. };
  62. //--| Export
  63. exports.code128 = code128;
  64. })();
  65. /**
  66. * showDiv:代表需要显示的divID,
  67. * textVlaue : 代表需要生成的值,
  68. * barcodeType:代表生成类型(A、B、C)三种类型
  69. */
  70. function createBarcode(showDiv, textValue, barcodeType) {
  71. var divElement = document.getElementById(showDiv);
  72. divElement.innerHTML = code128(textValue, barcodeType);
  73. }

发表评论

表情:
评论列表 (有 0 条评论,169人围观)

还没有评论,来说两句吧...

相关阅读

    相关 excel批量生成条形码

    首先我们需要下载一个条码字体包 我这里使用的是barcode39,还有barcode128格式的,大家可以根据需要的条码自行修改 然后我们在excel中的第一列放入条码值,

    相关 条形码生成

    条形码的生成 条形码简介 条形码:是将宽度不等的多个黑条和空白,按照一定的编码规则排列,用以表达一组信息的图形标识符 条形码的种类 条形码分为一位条形码和二