前言

二维码又称二维条码，常见的二维码为QR Code，QR全称Quick Response，是一个近几年来移动设备上超流行的一种编码方式，它比传统的Bar Code条形码能存更多的信息，也能表示更多的数据类型。

二维条码/二维码（2-dimensional bar code）是用某种特定的几何图形按一定规律在平面（二维方向上）分布的、黑白相间的、记录数据符号信息的图形；在代码编制上巧妙地利用构成计算机内部逻辑基础的“0”、“1”比特流的概念，使用若干个与二进制相对应的几何形体来表示文字数值信息，通过图象输入设备或光电扫描设备自动识读以实现信息自动处理：它具有条码技术的一些共性：每种码制有其特定的字符集；每个字符占有一定的宽度；具有一定的校验功能等。同时还具有对不同行的信息自动识别功能、及处理图形旋转变化点。

好了, 废话不多说, 直接上干货

插件形式

我在项目中主要用到插件的形式去解决问题

vue-qr插件

插件的常用参数
:logo-src="logoSrc"		//二维码中间的图
:size="191"			//二维码宽高大小
:margin="0"			//默认边距20px
:auto-color="true"		//若为 true, 背景图的主要颜色将作为实点的颜色, 即 colorDark,默认 true
:dot-scale="1"			//据区域点缩小比例,默认为1
:text="appSrc"			//二维码内容
colorDark="red"			//实点颜色,需要和colorLight一起设置
colorLight="yellow"		//空白的颜色,需要和colorDark一起设置
id="qrCode"

以下是使用步骤

安装
npm install vue-qr --save

//在组件中使用
<template>
  <vue-qr ref="qr" logoSrc="" :text="qrCodeUrl" :size="200"></vue-qr>
  <el-button type="primary" size="small" @click="downloadQR()">保存</el-button>
</template>

<script>
import vueQr from 'vue-qr';

export default {
    components: {
        vueQr,
    },
    data() {
        return {
        qrCodeUrl:"www.baidu.com"
        }
    },
    methods: {
        downloadQR() {
           let a = document.createElement('a');
           // 下载图名字
           a.download = "qrcode";
           //url
           a.href = this.$refs.qr.$el.src;
           //合成函数，执行下载
           a.dispatchEvent(new MouseEvent('click'))
       },
   }
}
</script>

qrcodejs2插件

其实下载二维码还有一种直接的方式, 但是我用的时候报错, 不清楚是哪里有问题, 就不拿出来了

下面的直接拿就可以使用了

// 安装
npm i qrcodejs2
npm i html2canvas      //主要将二维码转成图片

//在组件中使用
<template>
  <div id="qrcode" ref="qrcode" @click="download"></div>
</template>

//定义数据
data() {
    return {
      imgData:null
    };
},


//方法
methods: {
    download() {
      html2canvas(this.$refs.qrcode, {
        backgroundColor: null,
        width: 128,				//跟二维码的大小保持一致
        height: 128,
      }).then((canvas) => {
        var imgData = canvas.toDataURL("image/jpeg");
        this.imgData = imgData; //获取数据
      });

      // 转成图片进行下载
      const image = new Image();
      image.setAttribute("crossOrigin", "anonymous");// 跨域，解决跨域 Canvas 污染问题
      image.onload = function() {
        const canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        const context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        const url = canvas.toDataURL("image/png"); // 得到图片的base64编码数据
        const a = document.createElement("a"); // 生成一个a元素
        const event = new MouseEvent("click"); // 创建一个单击事件
        a.download = "移动端链接" || "photo"; // 设置图片名称
        a.href = url; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
      };
      image.src = this.imgData;  // 图片的路径
    },
  },
  
  //渲染完成之后
  mounted() {
    this.$refs.qrcode;
    // const qrcode = new QRCode('qrcode', {  //这里可以直接使用id选择器, 也可以使用ref的方式来获取dom
    const qrcode = new QRCode(this.$refs.qrcode, {
      text: "http://baidu.com",  
      width: 128,
      height: 128,
      colorDark: "#000000",			// 二维码色
      colorLight: "#ffffff",			// 背景色
      correctLevel: QRCode.CorrectLevel.H,	// 容错等级，L M Q H, H是heigh最高，所以二维码看起来很密
    });
    // qrcode.clear() // clear the code.
    // qrcode.makeCode('http://naver.com') // make another code.
  },

vue --- 二维码的生成和下载

前言

插件形式

vue-qr插件

qrcodejs2插件