当前位置：首页 > article >正文

vue单据打印一维码、二维码实现

article 2025/2/22 22:37:27

编码规则与 JavaScript 代码实现
编码规则数组：定义了 Code 128 条形码编码规则数组 BARS，其中每个数字对应一种条形码的线条组合模式。

const 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,411131,113141,114131,311141,411131,211412,211214,211232,23311120];

起始码与结束码常量：定义了起始码的基础值 START_BASE 和结束码值 STOP。

const START_BASE = 38;
const STOP = 106;

生成条形码 HTML 代码的函数：code128 函数根据输入的条形码内容和类型生成对应的 HTML 代码。如果未指定条形码类型，会自动检测。对于类型为 C 且长度为奇数的条形码内容，会在前面补 0。

function code128(code, barcodeType) {
    if (arguments.length < 2) {
        barcodeType = code128Detect(code);
    }
    if (barcodeType === 'C' && code.length % 2 === 1) {
        code = '0' + code;
    }
    const bars = parseBarcode(code, barcodeType);
    return bar2html(bars.join(''));
}

将条形码编码转换为 HTML 元素的函数：bar2html 函数将条形码编码数组转换为 HTML 元素字符串，每个编码对应一个包含线条和间隔样式的

元素。
javascript
function bar2html(s) {
const elements = [];
for (let pos = 0; pos < s.length; pos += 2) {
elements.push( <div class="bar${s.charAt(pos)} space${s.charAt(pos + 1)}"></div>);
}
return elements.join(‘’);
}
检测条形码类型的函数：code128Detect 函数根据输入的条形码内容检测其类型，纯数字为 C 型，包含小写字母为 B 型，其他为 A 型。

function code128Detect(code) {
    if (/^[0-9]+$/.test(code)) return 'C';
    if (/[a-z]/.test(code)) return 'B';
    return 'A';
}

解析条形码字符串的函数：parseBarcode 函数解析条形码字符串，根据条形码类型进行字符编码转换，并计算校验码。最后添加起始码、校验码和结束码到条形码编码数组。
javascript

function parseBarcode(barcode, barcodeType) {
    const bars = [];
    let check = 0;
    // 添加起始码
    bars.push(BARS[START_BASE + barcodeType.charCodeAt(0)]);
    for (let i = 0; i < barcode.length; i++) {
        let code;
        if (barcodeType === 'C') {
            code = +barcode.substr(i++, 2);
        } else {
            code = barcode.charCodeAt(i);
        }
        const converted = fromType[barcodeType](code);
        if (isNaN(converted) || converted < 0 || converted > 106) {
            throw new Error(`Unrecognized character (${code}) at position ${i} in code '${barcode}'.`);
        }
        check = bars.length === 0? converted : check + converted * bars.length;
        bars.push(BARS[converted]);
    }
    // 添加校验码和结束码
    bars.push(BARS[check % 103], BARS[STOP]);
    return bars;
}
字符编码转换函数对象：fromType 对象包含了不同条形码类型的字符编码转换函数。
javascript
const fromType = {
    A: function(charCode) {
        if (charCode >= 0 && charCode < 32) return charCode + 64;
        if (charCode >= 32 && charCode < 96) return charCode - 32;
        return charCode;
    },
    B: function(charCode) {
        if (charCode >= 32 && charCode < 128) return charCode - 32;
        return charCode;
    },
    C: function(charCode) {
        return charCode;
    }
};

将 code128 函数挂载到 window 对象：使 code128 函数在全局可用。

window.code128 = code128;

HTML 与 CSS 样式
HTML 结构：在 HTML 页面中，使用一个 div 元素（id=“barCodeDiv”）来显示生成的条形码。
html

<div class="left marginleft">
    <div class="barcode2" id="barCodeDiv"></div>
</div>

同时，通过一个隐藏的 input 元素（id=“barCodeValue”）获取要生成条形码的内容。
html

CSS 样式：定义了用于显示条形码的样式类，包括线条的宽度和间隔的大小。
css

.barcode2 {
    float: left;
    clear: both;
    overflow: auto;
    height: 1in;
}
.barcode2 + * {
    clear: both;
}
.barcode2 div {
    float: left;
    height: 0.7in;
}
.barcode2.bar1 {
    border-left: 2px solid black;
}
.barcode2.bar2 {
    border-left: 4px solid black;
}
.barcode2.bar3 {
    border-left: 6px solid black;
}
.barcode2.bar4 {
    border-left: 8px solid black;
}
.barcode2.space0 {
    margin-right: 0;
}
.barcode2.space1 {
    margin-right: 2px;
}
.barcode2.space2 {
    margin-right: 4px;
}
.barcode2.space3 {
    margin-right: 6px;
}
.barcode2.space4 {
    margin-right: 8px;
}
.barcode2 label {
    clear: both;
    display: block;
    text-align: center;
    font: 0.250in/100% helvetica;
}

最终渲染
通过以下 JavaScript 代码获取隐藏 input 元素中的值，并使用 code128 函数生成条形码 HTML 代码，插入到指定的 div 元素中。

const divElement = document.getElementById("barCodeDiv");
const v = document.getElementById("barCodeValue").value;
if (v) {
    divElement.innerHTML = code128(v, "B");
}

通过以上步骤，在 HTML 页面中实现了 Code 128 一维码的生成与显示。
html 删除其他无关代码，只保留一维码部分

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Code 128 Barcode</title>
  <style type="text/css">
  .barcode2 {
      float: left;
      clear: both;
      overflow: auto;
      height: 1in;
    }

  .barcode2 + * {
      clear: both;
    }

  .barcode2 div {
      float: left;
      height: 0.7in;
    }

  .barcode2.bar1 {
      border-left: 2px solid black;
    }

  .barcode2.bar2 {
      border-left: 4px solid black;
    }

  .barcode2.bar3 {
      border-left: 6px solid black;
    }

  .barcode2.bar4 {
      border-left: 8px solid black;
    }

  .barcode2.space0 {
      margin-right: 0;
    }

  .barcode2.space1 {
      margin-right: 2px;
    }

  .barcode2.space2 {
      margin-right: 4px;
    }

  .barcode2.space3 {
      margin-right: 6px;
    }

  .barcode2.space4 {
      margin-right: 8px;
    }

  .barcode2 label {
      clear: both;
      display: block;
      text-align: center;
      font: 0.250in/100% helvetica;
    }
  </style>
</head>

<body>
  <div class="left marginleft">
    <div class="barcode2" id="barCodeDiv"></div>
  </div>
  <input id="barCodeValue" type="hidden" value="SCMRMEGA1904128156">
  <script>
    (function () {
      // Code 128 条形码编码规则数组
      const 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, 411131, 113141, 114131, 311141, 411131, 211412, 211214, 211232, 23311120];
      const START_BASE = 38;
      const STOP = 106;

      // 生成 Code 128 条形码 HTML 代码
      function code128(code, barcodeType) {
        if (arguments.length < 2) {
          barcodeType = code128Detect(code);
        }
        if (barcodeType === 'C' && code.length % 2 === 1) {
          code = '0' + code;
        }
        const bars = parseBarcode(code, barcodeType);
        return bar2html(bars.join(''));
      }

      // 将条形码编码转换为 HTML 元素
      function bar2html(s) {
        const elements = [];
        for (let pos = 0; pos < s.length; pos += 2) {
          elements.push(`<div class="bar${s.charAt(pos)} space${s.charAt(pos + 1)}"></div>`);
        }
        return elements.join('');
      }

      // 检测条形码类型
      function code128Detect(code) {
        if (/^[0 - 9]+$/.test(code)) return 'C';
        if (/[a - z]/.test(code)) return 'B';
        return 'A';
      }

      // 解析条形码字符串
      function parseBarcode(barcode, barcodeType) {
        const bars = [];
        let check = 0;
        // 添加起始码
        bars.push(BARS[START_BASE + barcodeType.charCodeAt(0)]);
        for (let i = 0; i < barcode.length; i++) {
          let code;
          if (barcodeType === 'C') {
            code = +barcode.substr(i++, 2);
          } else {
            code = barcode.charCodeAt(i);
          }
          const converted = fromType[barcodeType](code);
          if (isNaN(converted) || converted < 0 || converted > 106) {
            throw new Error(`Unrecognized character (${code}) at position ${i} in code '${barcode}'.`);
          }
          check = bars.length === 0? converted : check + converted * bars.length;
          bars.push(BARS[converted]);
        }
        // 添加校验码和结束码
        bars.push(BARS[check % 103], BARS[STOP]);
        return bars;
      }

      // 字符编码转换函数
      const fromType = {
        A: function (charCode) {
          if (charCode >= 0 && charCode < 32) return charCode + 64;
          if (charCode >= 32 && charCode < 96) return charCode - 32;
          return charCode;
        },
        B: function (charCode) {
          if (charCode >= 32 && charCode < 128) return charCode - 32;
          return charCode;
        },
        C: function (charCode) {
          return charCode;
        }
      };

      // 将 code128 函数挂载到 window 对象上
      window.code128 = code128;
    })();
    const divElement = document.getElementById("barCodeDiv");
    const v = document.getElementById("barCodeValue").value;
    if (v) {
      divElement.innerHTML = code128(v, "B");
    }
  </script>
</body>

</html>

vue打印代码

 let newOpen = window.open()
      newOpen.document.write(this.html)
      setTimeout(() => {
        newOpen.window.print()
        // 如果直接关窗口，弹警告
        if (newOpen.closed) {
          // 请勿直接关闭打印窗口
          alert(this.$t('MSG040005'))
          return
        }
        // 打印或取消，自动关闭新窗口
        newOpen.close()
      }, 100)

 document.body.innerHTML = this.html
   console.log(this.html)
   window.print()
   setTimeout(() => {
     window.location.reload()
   }, 100)

区别总结
窗口操作：第一段代码打开一个新的窗口进行打印，不会影响当前页面；第二段代码直接在当前页面进行打印，并在打印完成后重新加载页面。
页面内容处理：第一段代码将内容写入新窗口，不改变当前页面的内容；第二段代码直接替换当前页面的 body 内容。
用户体验：第一段代码提供了一个独立的打印窗口，用户可以在不影响当前页面的情况下进行打印操作；第二段代码会临时改变当前页面的内容，可能会给用户带来一些干扰。
综上所述，选择使用哪段代码取决于具体的需求和场景。如果需要独立的打印环境，避免影响当前页面，建议使用第一段代码；如果需要临时修改当前页面内容进行打印，并且希望打印完成后恢复页面状态，可以使用第二段代码。
如下是二维码的生成代码

<input id="barCodeValue" value="110000918" type="hidden" th:value="${runcardId}"/>
<script>
    // 生成第二个二维码
    var qrcodeDiv2 = document.getElementById("barCodeDiv");
    var v1 = document.getElementById("barCodeValue").value;
    if (v1!== '') {
        var qr = new QRCode(qrcodeDiv2, {
            text: v1,
            width: 130, // 设置二维码的宽度，可根据需要调整
            height: 130, // 设置二维码的高度，可根据需要调整
        });
    }
</script>

 <div class="barcode"style="height:150px;width: 150px" id="barCodeDiv"></div>

 #barCodeDiv {
            position: absolute;
            top: 0;
            right: 0;
        }
        .barcode {
            float: left;
            clear: both;
            padding: 0; /*quiet zone*/
            overflow: auto;
            /*height:0.5in;!*size*!*/
        }
        .barcode {
            float:left;
            clear:both;
            padding: 0; /*quiet zone*/
            overflow:auto;
            /*height:0.5in; !*size*!*/
        }
        .right { float:right; }
        .barcode + * { clear:both; }
        .barcode div {
            float:left;
            height: 0.35in; /*size*/
        }
        .barcode .bar1 { border-left:1px solid black; }
        .barcode .bar2 { border-left:2px solid black; }
        .barcode .bar3 { border-left:3px solid black; }
        .barcode .bar4 { border-left:4px solid black; }
        .barcode .space0 { margin-right:0 }
        .barcode .space1 { margin-right:1px }
        .barcode .space2 { margin-right:2px }
        .barcode .space3 { margin-right:3px }
        .barcode .space4 { margin-right:4px }
        .barcode label {
            clear:both;
            display:block;
            text-align:center;
            font: 0.125in/100% helvetica; /*size*/
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

查看全文

http://www.kler.cn/a/553860.html

告别卡关！XSS挑战之旅全关卡通关思路详解

notepad++右键菜单不见了

[c语言日寄]字符串的左旋与右旋

android studio 高版本创建项目时，修改setting跟build后，运行不了的问题解决

零基础学QT、C++（四）QT程序打包

【C】栈的应用

【从0做项目】Java搜索引擎（7） web模块

Git入门与进阶：详细使用指南

linux环境-nginx通过nginx_upstream_check_module模块，配置服务自动检测-日志自动分割

点击unity资源文件自动展开左侧的文件路径

Github 2025-02-16 php开源项目日报 Top10

解析跨域：原理、解决方案与实践指南

JDK 8+新特性（Stream API、Optional、模块化等）

Nacos学习(一)——基本介绍、安装与负载均衡策略

Ubuntu：20.04更新cmake到更高版本

Linux 文件与目录命令学习记录

基于Flask的去哪儿网海南旅游攻略数据分析系统的设计与实现

vue-awesome-swiper 露出下一张图片部分+自定义按钮滑动到上一个/下一个slide

DeepSeek + Mermaid编辑器——常规绘图

Flutter开发如何高效布局

相关文章：