【前端HTML生成条形码——MQ】

于 2025-04-18 11:19:01 发布
阅读量1.2k 收藏 17
点赞数 11
文章标签： 前端 html 状态模式 条形码生成
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42588676/article/details/147323676
版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前端HTML生成条形码——MQ

前言

本文将展示前端HTML如何根据用户输入内容生成对应的条形码，附HTML和JS代码。

一、自定义显示页面

1、效果图

在这里插入图片描述

二、实现步骤

1、引入库

代码如下（示例）：

<script type="text/javascript" src="../lib/JsBarcode.all.min.js"></script>

2、实现函数

<script>
   // 生成条形码(code128)的函数
   document.getElementById('myButton').addEventListener('click', function () {
   
       var dom = document.getElementById('svg-barcode')
       var text = document.getElementById('barcodeText').value; // 获取input的值
       if (text == "") {
   
           alert("请输入条码内容");
           return;
       }
       if (dom) {
   
           JsBarcode(dom, text, {
   
               // 条形码格式，可以是 'EAN13', 'EAN8', 'CODE128', 'UPC', 'pharmacode'等等
               format: 'CODE128', 
               lineColor: '#000', // 条形码颜色
               width: 3, // 每个条形的宽度
               height: 100, // 条形码的高度
               displayValue: false, // 是否显示文本
               fontSize: 18, // 字体大小
               margin: 10, // 增加边距
           });
       }
   });
</script>

3、页面及函数代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>条形码生成</title>
    <script type="text/javascript" src="../lib/JsBarcode.all.min.js"></script>
    <style>
        .container {
     
            text-align: center;
        }
    </style>
</head>

<body>
    <div style="text-align: center;font-size: 18px;font-weight: 600;background-color: #007ACC;color: #fff;">
        <p>Developed by Mo</p>
    </div>
    <h1 style="text-align: center;font-weight: bolder;margin-top: 50px;font-size: 30px;">条形码生成</h1>
    <div style="max-width: 600px;margin: 0 auto;">
        <div class="input-group">
            <input type="text" id="barcodeText" class="form-control" placeholder="请输入条码内容">
            <span class="input-group-btn">
                <button class="btn btn-default" type="button" id="myButton">生成条形码</button>
            </span>
        </div>
        <div>
            <!-- 用于显示条形码的svg 这里必须是用svg 用canvas会很小而且扫描不好-->
            <svg style="width: 630rpx; height: 134rpx;margin-top: 20rpx" id="svg-barcode"></svg>
        </div>
    </div>
    
    <script>
        // 生成条形码(code128)的函数
        document.getElementById('myButton').addEventListener('click', function () {
     
            var dom = document.getElementById('svg-barcode')
            var text = document.getElementById('barcodeText').value; // 获取input的值
            if (text == "") {
     
                alert("请输入条码内容");
                return;
            }
            if (dom) {
     
                JsBarcode(dom, text, {
     
                    // 条形码格式，可以是 'EAN13', 'EAN8', 'CODE128', 'UPC', 'pharmacode'等等
                    format: 'CODE128',
                    lineColor: '#000', // 条形码颜色
                    width: 3, // 每个条形的宽度
                    height: 100, // 条形码的高度
                    displayValue: false, // 是否显示文本
                    fontSize: 18, // 字体大小
                    margin: 10, // 增加边距
                });
            }
        });
    </script>
</body>
</html>

三、附件，JsBarcode.all.min.js脚本代码

/*! JsBarcode v3.11.6 | (c) Johan Lindell | MIT license */
!function(t){
   var e={
   };function n(r){
   if(e[r])return e[r].exports;var o=e[r]={
   i:r,l:!1,exports:{
   }};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=t,n.c=e,n.d=function(t,e,r){
   n.o(t,e)||Object.defineProperty(t,e,{
   enumerable:!0,get:r})},n.r=function(t){
   "undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{
   value:"Module"}),Object.defineProperty(t,"__esModule",{
   value:!0})},n.t=function(t,e){
   if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{
   enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(r,o,function(e){
   return t[e]}.bind(null,o));return r},n.n=function(t){
   var e=t&&t.__esModule?function(){
   return t.default}:function(){
   return t};return n.d(e,"a",e),e},n.o=function(t,e){
   return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=15)}([function(t,e,n){
   "use strict";Object.defineProperty(e,"__esModule",{
   value:!0});e.default=function t(e,n){
   !function(t,e){
   if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.data=e,this.text=n.text||e,this.options=n}},function(t,e,n){
   "use strict";var r;function o(t,e,n){
   return e in t?Object.defineProperty(t,e,{
   value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}Object.defineProperty(e,"__esModule",{
   value:!0});var i=e.SET_A=0,a=e.SET_B=1,u=e.SET_C=2,f=(e.SHIFT=98,e.START_A=103),c=e.START_B=104,s=e.START_C=105;e.MODULO=103,e.STOP=106,e.FNC1=207,e.SET_BY_CODE=(o(r={
   },f,i),o(r,c,a),o(r,s,u),r),e.SWAP={
   101:i,100:a,99:u},e.A_START_CHAR=String.fromCharCode(208),e.B_START_CHAR=String.fromCharCode(209),e.C_START_CHAR=String.fromCharCode(210),e.A_CHARS="[\0-_È-Ï]",e.B_CHARS="[ -È-Ï]",e.C_CHARS="(Ï*[0-9]{2}Ï*)",e.BARS=[11011001100,11001101100,11001100110,10010011e3,10010001100,10001001100,10011001e3,10011000100,10001100100,11001001e3,11001000100,11000100100,10110011100,10011011100,10011001110,10111001100,10011101100,10011100110,11001110010,11001011100,11001001110,11011100100,11001110100,11101101110,11101001100,11100101100,11100100110,11101100100,11100110100,11100110010,11011011e3,11011000110,11000110110,10100011e3,10001011e3,10001000110,10110001e3,10001101e3,10001100010,11010001e3,11000101e3,11000100010,10110111e3,10110001110,10001101110,10111011e3,10111000110,10001110110,11101110110,11010001110,11000101110,11011101e3,11011100010,11011101110,11101011e3,11101000110,11100010110,11101101e3,11101100010,11100011010,11101111010,11001000010,11110001010,1010011e4,10100001100,1001011e4,10010000110,10000101100,10000100110,1011001e4,10110000100,1001101e4,10011000010,10000110100,10000110010,11000010010,1100101e4,11110111010,11000010100,10001111010,10100111100,10010111100,10010011110,10111100100,10011110100,10011110010,11110100100,11110010100,11110010010,11011011110,11011110110,11110110110,10101111e3,10100011110,10001011110,10111101e3,10111100010,11110101e3,11110100010,10111011110,10111101110,11101011110,11110101110,11010000100,1101001e4,11010011100,1100011101011]},function(t,e,n){
   "use strict";Object.defineProperty(e,"__esModule",{
   value:!0});e.SIDE_BIN="101",e.MIDDLE_BIN="01010",e.BINARIES={
   L:["0001101","0011001","0010011","0111101","0100011","0110001","0101111","0111011","0110111","0001011"],G:["0100111","0110011","0011011","0100001","0011101","0111001","0000101","0010001","0001001","0010111"],R:["1110010","1100110","1101100","1000010","1011100","1001110","1010000","1000100","1001000","1110100"],O:["0001101","0011001","0010011","0111101","0100011","0110001","0101111","0111011","0110111","0001011"],E:["0100111","0110011","0011011","0100001","0011101","0111001","0000101","0010001","0001001","0010111"]},e.EAN2_STRUCTURE=["LL","LG","GL","GG"],e.EAN5_STRUCTURE=["GGLLL","GLGLL","GLLGL","GLLLG","LGGLL","LLGGL","LLLGG","LGLGL","LGLLG","LLGLG"],e.EAN13_STRUCTURE=["LLLLLL","LLGLGG","LLGGLG","LLGGGL","LGLLGG","LGGLLG","LGGGLL","LGLGLG","LGLGGL","LGGLGL"]},function(t,e,n){
   "use strict";Object.defineProperty(e,"__esModule",{
   value:!0});var r=n(2);e.default=function(t,e,n){
   var o=t.split("").map((function(t,n){
   return r.BINARIES[e[n]]})).map((function(e,n){
   return e?e[t[n]]:""}));if(n){
   var i=t.length-1;o=o.map((function(t,e){
   return e<i?t+n:t}))}return o.join("")}},function(t,e,n){
   "use strict";Object.defineProperty(e,"__esModule",{
   value:!0});var r,o=function(){
   function t(t,e){
   for(var n=0;n<e.length;n++){
   var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){
   return n&&t(e.prototype,n),r&&t(e,r),e}}(),i=n(0);var a=function(t){
   function e(t,n){
   return function(t,e){
   if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e),function(t,e){
   if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t,n))}return function(t,e){
   if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{
   constructor:{
   value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(e,t),o(e,[{
   key:"encode",value:function(){
   for(var t="110",e=0;e<this.data.length;e++){
   var n=parseInt(this.data[e]).toString(2);n=u(n,4-n.length);for(var r=0;r<n.length;r++)t+="0"==n[r]?"100":"110"}return{
   data:t+="1001",text:this.text}}},{
   key:"valid",value:function(){
   return-1!==this.data.search(/^[0-9]+$/)}}]),e}(((r=i)&&r.__esModule?r:{
   default:r}).default);function u(t,e){
   for(var n=0;n<e;n++)t="0"+t;return t}e.default=a},function(t,e,n){
   "use strict";Object.defineProperty(e,"__esModule",{
   value:!0});var r,o=function(){
   function t(t,e){
   for(var n=0;n<e.length;n++){
   var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){
   return n&&t(e.prototype,n),r&&t(e,r),e}}(),i=n(0),a=(r=i)&&r.__esModule?r:{
   default:r},u=n(1);var f=function(t){
   function e(t,n){
   !function(t,e){
   if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e);var r=function(t,e){
   if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t.substring(1),n));return r.bytes=t.split("").map((function(t){
   return t.charCodeAt(0)})),r}return function(t,e){
   if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{
   constructor:{
   value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(e,t),o(e,[{
   key:"valid",value:function(){
   return/^[\x00-\x7F\xC8-\xD3]+$/.test(this.data)}},{
   key:"encode",value:function(){
   var t=this.bytes,n=t.shift()-105,r=u.SET_BY_CODE[n];if(void 0===r)throw new RangeError("The encoding does not start with a start character.");!0===this.shouldEncodeAsEan128()&&t.unshift(u.FNC1);var o=e.next(t,1,r);return{
   text:this.text===this.data?this.text.replace(/[^\x20-\x7E]/g,""):this.text,data:e.getBar(n)+o.result+e.getBar((o.checksum+n)%u.MODULO)+e.getBar(u.STOP)}}},{
   key:"shouldEncodeAsEan128",value:function(){
   var t=this.options.ean128||!1;return"string"==typeof t&&(t="true"===t.toLowerCase()),t}}],[{
   key:"getBar",value:function(t){
   return u.BARS[t]?u.BARS[t].toString():""}},{
   key:"correctIndex",value:function(t,e){
   if(e===u.SET_A){
   var n=t.shift();return n<32?n+64:n-32}return e===u.SET_B?t.shift()-32:10*(t.shift()-48)+t.shift()-48}},{
   key:"next",value:function(t,n,r){
   if(!t.length)return{
   result:"",checksum:0};var o=void 0,i=void 0;if(t[0]>=200){
   i=t.shift()-105;var a=u.SWAP[i];void 0!==a?o=e.next(t,n+1,a):(r!==u.SET_A&&r!==u.SET_B||i!==u.SHIFT||(t[0]=r===u.SET_A?t[0]>95?t[0]-96:t[0]:t[0]<32?t[0]+96:t[0]),o=e.next(t,n+1,r))}else i=e.correctIndex(t,r),o=e.next(t,n+1,r);var f=i*n;return{
   result:e.getBar(i)+o.result,checksum:f+o.checksum}}}]),e}(a.default);e.default=f},function(t,e,n){
   "use strict";Object.defineProperty(e,"__esModule",{
   value:!0}),e.mod10=function(t){
   for(var e=0,n=0;n<t.length;n++){
   var r=parseInt(t[n]);(n+t.length)%2==0?e+=r:e+=2*r%10+Math.floor(2*r/10)}return(10-e%10)%10},e.mod11=function(t){
   for(var e=0,n=[2,3,4,5,6,7],r=0;r<t.length;r++){
   var o=parseInt(t[t.length-1-r]);e+=n[r%n.length]*o}return(11-e%11)%11}},function(t,e,n){
   "use strict";Object.defineProperty(e,"__esModule",{
   value:!0});var r=Object.assign||function(t){
   for(var e=1;e<arguments.length;e++){
   var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t};e.default=function(t,e){
   return r({
   },t,e)}},function(t,e,n){
   "use strict";Object.defineProperty(e,"__esModule",{
   value:!0});var r=function(){
   function t(t,e){
   for(var n=0;n<e.length;n++){
   var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){
   return n&&t(e.prototype,n),r&&t(e,r),e}}(),o=n(2),i=a(n(3));function a(t){
   return t&&t.__esModule?t:{
   default:t}}var u=function(t){
   function e(t,n){
   !function(t,e){
   if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e);var r=function(t,e){
   if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t,n));return r.fontSize=!n.flat&&n.fontSize>10*n.width?10*n.width:n.fontSize,r.guardHeight=n.height+r.fontSize/2+n.textMargin,r}return function(t,e){
   if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{
   constructor:{
   value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(e,t),r(e,[{
   key:"encode",value:function(){
   return this.options.flat?this.encodeFlat():this.encodeGuarded()}},{
   key:"leftText",value:function(t,e){
   return this.text.substr(t,e)}},{
   key:"leftEncode",value:function(t,e){
   return(0,i.default)(t,e)}},{
   key:"rightText",value:function(t,e){
   return this.text.substr(t,e)}},{
   key:"rightEncode",value:function(t,e){
   return(0,i.default)(t,e)}},{
   key:"encodeGuarded",value:function(){
   var t={
   fontSize:this.fontSize},e={
   height:this.guardHeight};return[{
   data:o.SIDE_BIN,options:e},{
   data:this.leftEncode(),text:this.leftText(),options:t},{
   data:o.MIDDLE_BIN,options:e},{
   data:this.rightEncode(),text:this.rightText
最低0.47元/天 解锁文章
嘿_MQ
关注
【前端】Vue项目和微信小程序生成二维码和条形码
共同学习，共同成长
06-26 2万+
大家好，我是码喽的自我修养！今天给大家分享Vue项目和微信小程序如何生成二维码和条形码，介绍了JsBarcode、wxbarcode等插件，并提供具体代码帮助大家深入理解，彻底掌握！
【前端vue生成二维码和条形码——MQ】
最新发布
weixin_42588676的博客
04-17 316
前端vue生成二维码和条形码——MQ
web开发html前端使用javascript脚本库JsBarcode生成条形码(条码)
qq445829096的博客
08-22 610
web开发html前端使用javascript脚本库JsBarcode生成条形码(条码)
前端生成二维码 + 条形码
weixin_65808257的博客
03-11 208
采用的是qrcode。
html如何生成条形码,使用jsbarcode生成条形码
weixin_33211213的博客
06-07 1560
安装yarn add jsbarcode使用// HTMLElement 承载条形码的元素 svg/canvas// text 显示在条形码下方的文字// option 条形码的配置项 具体见【条形码的配置项】JsBarcode(HTMLElement,text,option)条形码的配置项使用中的optionbackground: "#ffffff" // 背景色displayValue:...
html如何生成条形码,前端使用JsBarcode生成条形码
weixin_33487490的博客
06-07 1965
前端使用JsBarcode生成条形码注：需引入 jsbarcode 插件JsBarcode安装:npminstalljsbarcode--savenpminstalljsbarcodeHTML 生成条形码代码html>$("#svgcode").JsBarcode('我是条形码');最终生成的条形码OptionDefault valueTypeformat(选择要使用的条形码...
HTML生成一维码（带条码
qq_38586439的博客
12-14 2219
HTML生成一维码（带条码） <span style='font-family:IDAutomationHC39M;font-size:16px;padding-left: 10px;'>*123456789*</span> 效果图如下 需要安装：IDAutomationHC39M 字体包下载地：https://download.csdn.net/download/qq_38586439/63238890 ...
html+js生成条形码和二维码 纯静态同时生成条形码和二维码
12-08
html+js生成条形码和二维码 纯静态同时生成条形码和二维码
前端生成二维码/条形码并以pdf导出
m939499的博客
09-26 338
前端生成二维码/条形码
HTML生成一维码（条形码字体包）
12-14
生成一维码字体，支持cs/bs，适用于条码，唯一编码打印，调用方便;font-size:16px;padding-left: 10px;'>*123456789* 。
使用html2canvas实现批量生成条形码
weixin_30319153的博客
12-15 394
/*前台代码*/ 1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="GenerateCodeBar.aspx.cs" 2 Inherits="CodeBar_GenerateCodeBar" EnableEventValidation="false" %> 3 4 <!DO...
jQuery HTML5条形码生成代码.zip
07-11
jQuery HTML5条形码生成代码
js生成条形码—JsBarcode及barcode简易运用（含js包）
01-09
内含JsBarcode.all.js ；JsBarcode.all.min.js ；jquery-barcode.js； 及JsBarcode、barcode（含二维码）简易运用，解压双击html即可运行js生成条形码功能
条形码生成器源码下载
08-02
条形码生成器源码 条形码技术是随着计算机与信息技术的发展和应用而诞生的，它是集编码、印刷、识别、数据采集和处理于一身的新型技术。 使用条形码扫描是今后市场流通的大趋势。为了使商品能够在全世界自由、广泛地流通，企业无论是设计制作，申请注册还是使用商品条形码，都必须遵循商品条形码管理的有关规定。 条形码技术的应用是实现现代化管理的必要手段，其优越性是众所周知的。无论工业领域如何发展，条形码却是实现工业自动化的必由之路。随着国内工业技术的发展，已有不少工厂实现了条形码的销售管理、库存管理和生产过程管理。
条码生成源代码(公司项目中提出来的)
10-12
公司项目中使用中的条码生成源码,可以直接移植用在其它需要条码生成的项目工程中
条形码、二维码扫描、生成Demo 完整源码
08-05
使用Google ZXing开源项目制作的条形码、二维码的生成、扫描Demo
条形码生成包 BarCodeToHTML.cs（以颜色为背景的完整版）（下载的完整版）
weixin_30814329的博客
05-06 178
//===================================================================================== // All Rights Reserved , Copyright © Learun 2013 //=========================================================...
前端生成条形码
qq_40409143的博客
11-29 2054
项目场景： 比如商品的信息对应的二维码 例如：生成如下的物流信息条形码 问题描述： 解决方案： 下载插件： 这样就可以生成想要的条形码啦，另外补充一下该插件常用的参数： 插件的安装 感谢您的阅读，谢谢支持！ ...
【vue3】前端实现 生成条形码并调用打印机打印
fruge365的博客
11-14 5455
【vue3】前端实现 生成条形码并调用打印机打印
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值