導讀

　　以前生成條碼都是外網網站上生成，因生產環境在內網中，上不了外網，只能在項目中生成相應規則，故將此方法整理下來。

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>測試</title>
    <script src="https://cdn.bootcss.com/jsbarcode/3.8.0/JsBarcode.all.min.js"></script>
</head>
<body>
    <h1>hhhhhhhhhhhhhhhhhhhhhhh</h1>
    <div class="box">
        <img id="barcode" />
    </div>
    <input type="text" id="content" placeholder="請輸入條碼內容"/>
    <input type="button" id="autoIma" value="生成" onclick="CreateIma()"/>
    <input type="button" id="btnsavaImg" value="保存圖片到本地" onclick="Download()" />
    <script>
        //生成條碼
        function CreateIma() {
            var content = document.getElementById('content').value;
            if (content == undefined || content == "") {
                alert("請輸入條碼內容!");
                return;
            };
            var barcode = document.getElementById('barcode'),
                //str = "chenyanbin",
                options = {
                    format: "CODE128",
                    displayValue: true,
                    fontSize: 18,
                    height: 100
                };
            JsBarcode(barcode, content, options); //原生JS方式
        // $('#barcode').JsBarcode(string, options); //jQuery方式
        }

        //將生成的條形碼保存至本地
        function Download() {
            // 通過選擇器獲取img元素
            var img = document.getElementById('barcode')
            // 將圖片的src屬性作為URL地址
            var url = img.src
            var a = document.createElement('a')
            var event = new MouseEvent('click')

            a.download = name || '下載圖片名稱'
            a.href = url

            a.dispatchEvent(event) //根據A標簽的屬性來搞事情
        };
    </script>
</body>
</html>

不支持中文！！！！

效果

項目下載(附js插件)

鏈接：https://pan.baidu.com/s/1nKtP5GbaEvQRs9ttTtWdAw 
提取碼：7co8

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 使用jsbarcode生成條形碼 Vue 生成條形碼 jsbarcode的使用前端如何生成條形碼---JsBarcode js生成條形碼——JsBarcode 條形碼--JsBarcode 條形碼--JsBarcode python 生成條形碼 java生成條形碼 java 生成條形碼 JSP生成條形碼