Qrcode: generate QR code from text

One . Method used

1. install yarn add qrcode perhaps npm  i   qrcode

2. Import import Qrcode from 'qrcode'

3. Define a canvas Label QR code

<canvas ref="canvas" />

4. Generate

Qrcode.toCanvas( Need to place QR code canvas label , Text content ,{ Preparation , Width , Height ....})

Two . Actual operation

(1) download

(2) Import

import Qrcode from 'qrcode'

 (3) Define a canvas Label QR code

<canvas ref="canvas" >     </canvas>

(4) Generate

<template>
  <div class="">
    <canvas ref="canvas" >
      </canvas  >
    <el-button @click="fn" type="primary" > Click generation </el-button>
  </div>
</template>

<script>
import Qrcode from 'qrcode'
export default {
  name: '',
  methods: {
    fn(){
      Qrcode.toCanvas(this.$refs.canvas,'https://www.baidu.com/',{width:500,height:500})
    }
  }
}
</script>

<style scoped>

</style>

 

Click scan code to enter Baidu website .