JS 數字或英文生成條形碼
阿新 • • 發佈：2020-08-05
<!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>條形碼生成測試</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> //生成條碼 functionCreateIma() { 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>