【Vue.js】vue-barcodeで簡単バーコード生成

世の中どこにでもあるバーコード、実はvue-barcodeを使うと簡単に表示することができます。

バーコード表示が必要なアプリケーションを作る機会があったので、備忘録として残します。

対応しているバーコード

CODE128 
EAN 
EAN-13
EAN-8
EAN-5
EAN-2
UPC (A)
CODE39
ITF-14
MSI
Pharmacode
Codabar

インストール

npm

1. npm install vue@3 jsbarcode@3 @chenfengyuan/vue-barcode@2

Yarn

1. yarn add vue@3 jsbarcode@3 @chenfengyuan/vue-barcode@2

package.json

使い方

入力

1. <template>
2. <div class="productsLabel">
3. <vue-barcode value="1239393939" format="barcode-format">読み込みに失敗しました</vue-barcode>
4. </div>
5. </template>
6.  
7. <script>
8. import VueBarcode from '@chenfengyuan/vue-barcode';
9. export default {
10. components:{
11. VueBarcode
12. },
13. }
14. </script>

出力

optionsを使ってみる

参考：https://github.com/lindell/JsBarcode

1. <vue-barcode value="1239393939" format="barcode-format" :options="{lineColor: '#0aa'}">読み込みに失敗しました</vue-barcode>

1. <vue-barcode value="1239393939" format="barcode-format" :options="{lineColor: 'red',text: 'Thanks!!',background: 'black'}">読み込みに失敗しました</vue-barcode>

参考サイト

github.com