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

 

转载于:https://www.cnblogs.com/54sister/p/9554820.html