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