vue二维码生成与图片下载

Vue实现动态生成并下载二维码

最新推荐文章于 2025-08-27 21:46:16 发布

原创最新推荐文章于 2025-08-27 21:46:16 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

web前端系列专栏收录该内容

26 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用qrcode-vue库生成二维码，并提供代码实例，包括安装步骤、组件配置和下载图片的实现。

（一）web页面效果：

（二）执行结果：

（三）vue代码实例：

1）安装qrcode-vue库：npm install --save qrcode-vue

2）vue代码

<template>
  <div class="div-box">
    <qrcode-vue
        id="qrcodeBox"
        :size="qrcodeVue.size"
        :value="qrcodeVue.value"
        :bgColor="qrcodeVue.bgColor"
        :fgColor="qrcodeVue.fgColor">
    </qrcode-vue>
     <el-button type="primary" icon="el-icon-document" size="small" @click="downloadCode">下载二维码图片</el-button>
  </div>       
</template>

<script>

  import qrcodeVue from 'qrcode-vue'

  export default {
    name: 'Test',
    components: { qrcodeVue },
    data () {
      return {
         qrcodeVue: {
          size: 150,
          bgColor: '#67C23A', //背景色
          fgColor: '#FFFFFF', //前景色
          value: 'qrCode value', //二维码值
          logo: require('@/assets/logo.png') //logo图片
        }
      }
    },
    created () {
      
    },
    mounted () {
       
    },
    methods: {
       downloadCode(){
          //找到canvas标签
          let myCanvas = document
            .getElementById('qrcodeBox')
            .getElementsByTagName('canvas')
          let img = document.getElementById('qrcodeBox').getElementsByTagName('img')
          // // //创建一个a标签节点
          let a = document.createElement('a')
          // //设置a标签的href属性（将canvas变成png图片）
          let imgURL = myCanvas[0].toDataURL('image/jpg')
          let ua = navigator.userAgent
          if (ua.indexOf('Trident') != -1 && ua.indexOf('Windows') != -1) {
            // IE内核 并且  windows系统 情况下 才执行;
            var bstr = atob(imgURL.split(',')[1])
            var n = bstr.length
            var u8arr = new Uint8Array(n)
            while (n--) {
              u8arr[n] = bstr.charCodeAt(n)
            }
            var blob = new Blob([u8arr])
            window.navigator.msSaveOrOpenBlob(blob,row.num+'('+row.materialNum+')'+ '.' + 'png')
          } else if (ua.indexOf('Firefox') > -1) {
            //火狐兼容下载
            let blob = this.base64ToBlob(imgURL) //new Blob([content]);
            let evt = document.createEvent('HTMLEvents')
            evt.initEvent('click', true, true) //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
            a.download = row.num+'('+row.materialNum+')' //下载图片名称，如果填内容识别不到，下载为未知文件，所以我这里就不填为空
            a.href = URL.createObjectURL(blob)
            a.dispatchEvent(
              new MouseEvent('click', {
                bubbles: true,
                cancelable: true,
                view: window
              })
            ) //兼容火狐
          } else {
            //谷歌兼容下载
            img.src = myCanvas[0].toDataURL('image/jpg')
            // a.href = myCanvas[0].toDataURL('image/png').replace('image/png', 'image/octet-stream')
            a.href = img.src
            //设置下载文件的名字
            a.download =  '二维码下载图片名称'
            //点击
            a.click()
          }       
       }
    }
  }
</script>

<style>
.div-box {
    width:fit-content;
    height:fit-content;
    padding: 2px;
    border: 1px dashed #f69c55;
    position: relative;
    text-align: center;
}
</style>