vue-qr-print

Installation

Using NPM:

$ npm i vue-qr-print

Usage

In your main.js file:

import VueQrPrint from 'vue-qr-print'

Vue.use(VueQrPrint);

In your components template:

<template>
    <button @click="onStartPrint">Print</button>
    ...
    <qr-print :isStartPrint="isStartPrint"
              :qrCodeId="qrCodeId"
              :qrCodeIdText="qrCodeIdText"
              :isShowQrCodeId="true"
              :headerSvg="qrHeaderSvg"
              :logoSvg="qrLogoSvg"
              :qrSize="qrSize"
              :title="qrTitle"
              :subtitle="qrSubtitle"
              @endPrint="onEndPrint">
    </qr-print>
</template>
<script>
  export default {
    data() {
      return {
        isStartPrint: false,
        qrCodeId: 'qrId',
        qrCodeIdText: 'qrIdText',
        qrHeaderSvg: '<svg>...</svg>',
        qrLogoSvg: '<svg>...</svg>',
        qrSize: 's',
        qrTitle: 'This is QR Code Title',
        qrSubtitle: 'This is QR Code Subtitle'
      }
    },
    methods: {
      onStartPrint() {
        this.isStartPrint = true;
      },
      onEndPrint() {
        this.isStartPrint = false;
      }, 
    }
  }
</script>

Props

| Prop | Type (Range) | Default | Required | |-----------------|-----------------------|---------|----------| | isStartPrint | Boolean | | true | | qrCodeId | String | | true | | qrCodeIdText | String | | false | | isShowQrCodeId | Boolean | false | false | | headerSvg | String | | false | | logoSvg | String | | false | | qrSize | String (s, m, l)| m | false | | title | String | | false | | subtitle | String | | false |

License

MIT