超简单的vue实现生成二维码并下载为图片（可直接复制使用）

背景

因为一些需求需要生成大量的二维码，用于用户核销使用，这里就用了一个比较使用的多的一个组件vue-qr.

效果

实际效果，大家可以去下面这个链接体验一下：

二维码生成工具体验网站

实现

一、添加依赖

npm install --save vue-qr

如果会报错，可以和我一样，直接引入指定版本，最新版本有一定几率不兼容。

npm install --save vue-qr@3.2.4

二、 前端页面实现

通过下面的语句引入组件

import VueQr from 'vue-qr'

核心功能代码： 

<script>
import VueQr from 'vue-qr'
export default {
  name: 'Index',
  components: {
    VueQr
  },
  data () {
    return {
      content: '', // 输入框输入的内容
      text: '', // 二维码实际内容
      logoSrc: '', // 二维码中间的图片
      randomColor: 'black', // 二维码颜色
      qrCodeUrl: '', // 存放生成的二维码url
      isShowDialog: false, // 上传的图片预览dialog
      imageUrl: '' // 上传图片的临时显示链接
    }
  },
  created () {
    // 初始化显示
    this.content = 'https://livequeen.top'
    this.text = this.content
  },
  methods: {
    qrCodeCallback (url) {
      this.qrCodeUrl = url
    },
    handleQrCode (type) {
      // 判断输入框的二维码内容是否为空，不为空才生成二维码
      if (this.content === '') {
        this.$message.error('二维码内容不能为空')
      } else {
        // 将输入框内容，更新到二维码内容
        this.text = this.content
        // 判断按钮选项
        switch (type) {
        case 1:
          this.logoSrc = ''
          break
        case 2:
          this.$refs.chartImage.dispatchEvent(new MouseEvent('click'))
          break
        case 3:
          let name = new Date().getTime()
          let img = document.createElement('a')
          img.style.display = 'none'
          img.download = name
          img.href = this.qrCodeUrl
          document.body.appendChild(img)
          img.click()
          img.remove()
          break
        case 4:
          this.logoSrc = this.imageUrl
          this.isShowDialog = false
          break
        }
      }
    },
    // 选中图片后初步守卫
    showUpload () {
      let file = this.$refs.chartImage.files[0]
      // 文件格式大小判断处理
      const isJPG = file.type === 'image/jpeg' | file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!')
        return
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
        return
      }

      // 格式无误后，预览文件处理
      this.imgSaveToUrl(file)
      this.isShowDialog = true
      // 复刻文件信息
      this.files = file
    },
    // 获取选中图片的预览路径，并赋值给本地img路径，在前端展示
    imgSaveToUrl (file) {
      // 获取上传图片的本地URL，用于上传前的本地预览，转换后的地址为 blob:http://xxx/7bf54338-74bb-47b9-9a7f-7a7093c716b5
      this.imageUrl = URL.createObjectURL(file)
      console.log('图片预览地址：', this.imageUrl)
    },
    // 关闭卖出的dialog事件
    diaClose () {
      this.isShowDialog = false// 关闭窗口
    }
  }
}
</script>

 页面样式

<template>
  <div class="body">
    <!-- 输入框及按钮部分 -->
    <div class="body_btn">
      <el-input v-model="content" placeholder="请输入二维码内容" style="width: 500px;"></el-input>
      <el-button type="primary" class="common-button" @click="handleQrCode(1)">生成普通二维码</el-button>
      <el-button type="primary" class="common-button" @click="handleQrCode(2)">生成带logo二维码</el-button>
      <input v-show="false" type="file" accept="image/png, image/jpeg" ref="chartImage" id="fileInput" @change="showUpload">
      <el-button type="primary" class="common-button" @click="handleQrCode(3)" style="margin-left: 10px;">下载二维码</el-button>
    </div>
    <!-- 二维码显示界面 -->
    <div class="body_qr" v-show="text !== ''">
      <vue-qr
        ref="qrCode"
        :text="text"
        :logoSrc="logoSrc"
        :color-dark="randomColor"
        :callback="qrCodeCallback"
        width="250"
        height="250"
      ></vue-qr>
    </div>
    <!--发送图片dialog-->
    <el-dialog :visible.sync="isShowDialog"
               class="dialogUpload"
               @closed="diaClose">
      <el-image :src="imageUrl" class="images"></el-image>
      <div class="dialog_btn">
        <el-button @click="diaClose">取消</el-button>
        <el-button type="primary" @click="handleQrCode(4)">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

css样式

<style scoped>
.body{
  margin: 50px;
  padding: 20px;
  box-shadow: 0px 0px 5px 5px #c7c6c6;
}
.body_btn{
  text-align: center;
  margin: 100px;
}
.body_qr{
  text-align: center;
  margin-bottom: 300px;
}
.images{
  height: 350px;
  fit:contain;
}
.dialogUpload /deep/ .el-dialog{
  width: 800px;
  text-align: center;
}
.dialogUpload /deep/ .el-dialog__body{
  padding: 10px;
}
.dialog_btn{
  margin-top: 5px;
  text-align: right;
}
</style>