MyPrint打印设计器（三）设置整个条码宽度,让条形码的宽高填充整个div

那叫一个优雅

已于 2024-10-07 18:03:05 修改

阅读量748

点赞数 14

分类专栏： Myprint 可视化打印设计器文章标签： javascript 打印设计 JsBarcode 条码宽度 MyPrint

于 2024-08-27 09:00:00 首次发布

本文链接：https://blog.csdn.net/qq_37614259/article/details/141532085

版权

Myprint 可视化打印设计器专栏收录该内容

11 篇文章

订阅专栏

MyPrint打印设计器（三）设置整个条码宽度,让条形码的宽高填充整个di

让条形码填充整个div

所需环境：

浏览器
js

实现目标

设置整个元素的宽度，让条形码自适应填充整个宽度

JsBarcode 设置只支持设置每个条之间的宽度，并不支持设置整个条码的宽度，所以无法让条形码填充整个元素的宽度
如果想要设置整个条码的宽度，这个时候就需要手动通过条码的数值，
自动计算每个条之间的宽度,算法如下，根据每种条形码类型的不同逻辑，特殊处理

示例

在这里插入图片描述

核心js代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MyPrint|打印设计|条形码</title>
    <style>
        :root {
            font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
            line-height: 1.5;
            font-weight: 400;

            color-scheme: light dark;
            color: rgba(255, 255, 255, 0.87);
            background-color: #242424;

            font-synthesis: none;
            text-rendering: optimizeLegibility;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        body {
            display: flex;
            height: 100vh;
            place-items: center;
            justify-content: center;
            width: 100%;
            min-height: 100vh;
            margin: 0 auto;
            text-align: center;
        }

        #barcode-wrapper {
            background: white;
            flex-direction: column;
            display: flex;
            height: 100px;
        }

        .barcode-div {
            display: flex;
            width: 100%;
            max-width: 100%;
            height: 100%;
        }

        #barcode-val {
            color: black;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jsbarcode/3.11.6/JsBarcode.all.min.js"></script>
</head>
<body>
<div>
    <div id="barcode-wrapper">
        <div class="barcode-div">
            <svg id="code128" style="height: 100%" preserveAspectRatio="none"></svg>
        </div>
        <div id="barcode-val">Myprint-Barcode</div>
    </div>
    <input type="range" id="slider" min="100" max="1000" value="200">
    <p>当前宽度: <span id="sliderValue">200</span>px</p>
</div>
</body>
<script>
    let width = 200 // 更改宽度

    function freshBarCode() {
        try {
            const height = 100
            const barCodeDisplayValIs = 1
            const fontSize = 55
            const barCodeType = 'CODE128'
            const data = 'Myprint-Barcode'
            const codeLength = data.length;
            let numBars;

            // 根据不同的条形码类型设置条数
            switch (barCodeType) {
                case 'EAN2':
                    numBars = 20;
                    break;
                case 'EAN5':
                    numBars = 47;
                    break;
                case 'EAN8':
                    numBars = 67;
                    break;
                case 'EAN13':
                case 'UPC':
                    numBars = 95;
                    break;
                case 'UPC_E':
                    numBars = 57;
                    break;
                case 'ITF':
                    numBars = codeLength * 3;
                    break;
                case 'ITF14':
                    numBars = 94;
                    break;
                case 'CODE39':
                case 'codabar':
                    numBars = codeLength * 12;
                    break;
                case 'CODE128':
                case 'CODE128A':
                case 'CODE128B':
                case 'CODE128C':
                    numBars = codeLength * 2;
                    break;
                case 'pharmacode':
                    numBars = codeLength * 10;
                    break;
                case 'MSI':
                case 'MSI10':
                case 'MSI11':
                case 'MSI1010':
                case 'MSI1110':
                    numBars = codeLength * 2.5;
                    break;
                default:
                    numBars = codeLength * 7;  // 默认设置
            }

            const barWidth = width / numBars;

            JsBarcode('#code128', data, {
                format: barCodeType,//选择要使用的条形码类型
                width: barWidth, //设置条之间的宽度
                height: height,//高度
                displayValue: false,//是否在条形码下方显示文字
                //   text:"456",//覆盖显示的文本
                //   fontOptions:"bold italic",//使文字加粗体或变斜体
                //   font:"fantasy",//设置文本的字体
                //   textAlign:"left",//设置文本的水平对齐方式
                //   textPosition:"top",//设置文本的垂直位置
                textMargin: 0,//设置条形码和文本之间的间距
                fontSize: fontSize,//设置文本的大小
                background: 'white',//设置条形码的背景
                lineColor: 'black',//设置条和文本的颜色。
                margin: 0//设置条形码周围的空白边距
            });
            document.getElementById('code128').style.height = '100%';
        } catch (e) {
            console.log('不支持的内容')
        }
    }

    freshBarCode();

    const slider = document.getElementById('slider');
    const sliderValue = document.getElementById('sliderValue');
    const barcodeWrapper = document.getElementById('barcode-wrapper');
    barcodeWrapper.style.width = width + 'px'

    slider.addEventListener('input', function () {
        width = slider.value
        sliderValue.textContent = slider.value;
        barcodeWrapper.style.width = width + 'px'
        freshBarCode();
    });
</script>
</html>