JavaScript - JsBarcode条形码

<!DOCTYPE html>
<html>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jsbarcode/3.11.5/JsBarcode.all.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jQuery.print/1.6.2/jQuery.print.min.js"></script>
    <div id="print_content">
        <img id="barcode"></img>
        <br>姓名: 张三<br>身份证: 44044019990217444X<br>
    </div>
    <button id="print">打印</button>

    <script>
        $('#print').click(function(){
            JsBarcode("#barcode", '44044019990217444X|' + encodeURIComponent('张三'), {
                format: "CODE128",//选择要使用的条形码类型
                width: 3,  //设置条之间的宽度
                height: 100,  // 高度
                displayValue: true,  // 是否在条形码下方显示文字
                text: "wstong",  // 覆盖显示的文本
                fontOptions: "bold italic",  // 使文字加粗体或变斜体
                font: "fantasy",  // 设置文本的字体
                textAlign: "right",  // 设置文本的水平对齐方式
                textPosition: "top",  // 设置文本的垂直位置
                textMargin: 5,  // 设置条形码和文本之间的间距
                fontSize: 15,  // 设置文本的大小
                background: "#a5cfd5",  // 设置条形码的背景
                lineColor: "#000000",//设置条和文本的颜色。
                margin: 15  // 设置条形码周围的空白边距
            });
            $('#print_content').print();

            // 界面不生成条形码打印
            // const img = document.createElement('img');
            // img.innerHTML = '';
            // img.id = 'wstong_barcode'
            // document.body.appendChild(img);
            // JsBarcode("#wstong_barcode", '44044019990217444X|' + encodeURIComponent('张三'), {
            //     format: "CODE128",//选择要使用的条形码类型
            //     width: 3,  //设置条之间的宽度
            //     height: 100,  // 高度
            //     displayValue: true,  // 是否在条形码下方显示文字
            //     text: "wstong",  // 覆盖显示的文本
            //     fontOptions: "bold italic",  // 使文字加粗体或变斜体
            //     font: "fantasy",  // 设置文本的字体
            //     textAlign: "right",  // 设置文本的水平对齐方式
            //     textPosition: "top",  // 设置文本的垂直位置
            //     textMargin: 5,  // 设置条形码和文本之间的间距
            //     fontSize: 15,  // 设置文本的大小
            //     background: "#a5cfd5",  // 设置条形码的背景
            //     lineColor: "#000000",//设置条和文本的颜色。
            //     margin: 15  // 设置条形码周围的空白边距
            // });
            // var barcSrc = $("img[id='wstong_barcode']")[0]['src']
            // $("img[id='wstong_barcode']").remove();
            // var tmp = '<div><img id="barcode_img" src="'+barcSrc+'"><br>姓名: 张三<br>身份证: 44044019990217444X<br></div>'
            // $(tmp).print();
        })
    </script>
</html>