vue 生成條形碼

1、命令：

npm install jsbarcode --save 

 

2、引入：

<script src="https://www.jq22.com/jquery/vue.min.js"></script>

<script src='js/JsBarcode.all.min.js'></script>）

（安裝了依賴可不引入）

 

3、聲明：

var JsBarcode = require('jsbarcode')

 

4、簡單例子：

（1）你好，世界

　　　　HTML：<svg id="barcode"></svg>

              JS：  JsBarcode("#barcode", "Hi world!");

         　 結果：

                   

（2）示例與選項

　　HTML：<svg id="barcode"></svg>

　　JS： JsBarcode("#barcode", "1234", {

　　　　　format: "pharmacode",

　　 　　   lineColor: "#0aa",

　　 　　   width: 4,

　　 　　   height: 40,

　　　　   displayValue: false

　　　　});

　　結果：

　　　　

 

（3）在HTML元素中定義值和選項：

　　HTML：<svg class="barcode"

                            jsbarcode-format="CODE128"

                           :jsbarcode-value= obj.id

                            jsbarcode-textmargin="0"

                            jsbarcode-fontoptions="bold">

                      </svg>

          JS：JsBarcode(".barcode").init();

       結果：

             

 

（4）更高級的用例：

　　HTML：<svg id="barcode"></svg>

　　　 JS： JsBarcode("#barcode")

  　　　　　　.options({font: "OCR-B"})      // 會影響所有條形碼

 　　　　 　　.EAN13("1234567890128", {fontSize: 18, textMargin: 0})

 　　　　 　　.blank(20)        // 在條形碼之間創建空間 

  　　　　　　.EAN5("12345", {height: 85, textPosition: "top", fontSize: 16, marginTop: 15})

  　　　　　　.render();

　　 結果：

         

 

 

 

支持的條形碼：

• CODE128
  • CODE128（自動模式切換）
  • CODE128 A / B / C（強制模式）
• EAN
  • EAN-13
  • EAN-8
  • EAN-5
  • EAN-2
  • UPC（A）
  • UPC（E）
• CODE39
• ITF-14
• MSI
  • MSI10
  • MSI11
  • MSI1010
  • MSI1110

• Pharmacode
• Codabar