基于jsbarcode 生成條形碼并將生成的條碼保存至本地+源碼

更新時(shí)間：2020年04月27日 09:18:05 作者：陳彥斌

這篇文章主要介紹了基于jsbarcode 生成條形碼并將生成的條碼保存至本地，本文給大家提供最新源代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧

引言

JsBarcode是一個(gè)用JavaScript編寫的條形碼生成器。它支持多種條形碼格式，可在瀏覽器和Node.js中使用。如果你在項(xiàng)目中使用了jquery也可以使用jquery，但它不是依賴項(xiàng)。

導(dǎo)讀

　　以前生成條碼都是外網(wǎng)網(wǎng)站上生成，因生產(chǎn)環(huán)境在內(nèi)網(wǎng)中，上不了外網(wǎng)，只能在項(xiàng)目中生成相應(yīng)規(guī)則，故將此方法整理下來。

html

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>測(cè)試</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="請(qǐng)輸入條碼內(nèi)容"/>
 <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("請(qǐng)輸入條碼內(nèi)容!");
    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) //根據(jù)A標(biāo)簽的屬性來搞事情
  };
 </script>
</body>
</html>

不支持中文?。。。?/p>

效果