Qrcode前端生成二维码，列表循环，可以下载分享，附加功能

 Qrcode前端生成二维码，列表循环，可以下载分享，附加功能

前言: 

        项目需求，原型列表要求展示二维码，然后后端那边因为某种原因没有给我返回这个参数，无奈只好前端自己来做，于是乎便有了下面的操作，这篇文章来整理下。

        主要功能:

                1.生成二维码

                2.渲染列表

                3.生成图片下载

                4.分享二维码

下面开始吧

 原型图

扫描二维码关注公众号，回复： 14743921 查看本文章

 demo效果图：

  

先来几张效果图

 再来个扫码识别出来的

 生成二维码

 安装命令

npm install qrcodejs2 --save

页面引入

import QRCode from "qrcodejs2";

 实现1写法

       bindQRCode: function() {
         new QRCode(this.$refs.qrCodeDiv, {
           text: 'Vue实现生成二维码！',
           width: 200,
           height: 200,
           colorDark: "#333333", //二维码颜色
           colorLight: "#ffffff", //二维码背景色
           correctLevel: QRCode.CorrectLevel.L //容错率，L/M/H
         })
       }

实现2写法 

     
html
    <div id="qrcode"></div>


js

creatQrCode(qrUrl) {
        new QRCode(document.getElementById("qrcode"), {
          text: qrUrl,
          width: 128,
          height: 128,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H
        });
      },

下载二维码

savePic() {
      let qrCodeCanvas = document.getElementById("qrcode").getElementsByTagName("canvas");
      let a = document.createElement("a");
      a.href = qrCodeCanvas[0].toDataURL("image/url");
      a.download = `【${this.$microWidgetProps.contextMenu.getSelections[0].name}】二维码.png`;
      a.click();
}

 渲染列表

<template>
  <div>
    <div id="qqq">
      <div class="qrcode" ref="qrCodeUrl"></div>
    </div>
    <div id="qrcode">
    </div>
    <el-button type="primary">主要按钮</el-button>
    <el-table :data="list" height="250" border style="width: 100%">
      <el-table-column prop="product_code" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="product_name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="tech_index" label="地址">
      </el-table-column>
      <el-table-column prop="qrCode" label="二维码">
        <template slot-scope="scope">
          <!-- <img :src="scope.row.qrCode" alt=""> -->
          <el-image :src="scope.row.qrCode" :preview-src-list="[...scope.row.qrCode]"></el-image>
        </template>
      </el-table-column>
    </el-table>
  </div>

</template>
<script>
  import QRCode from 'qrcodejs2'
  export default {
    data() {
      return {
        list: [{
            product_code: "123",
            product_name: '小黑子',
            tech_index: '技术指标',
            exec_std: '执行标准',
            // qrCode:""
          },
          {
            product_code: "123",
            product_name: '小黑子',
            tech_index: '技术指标',
            exec_std: '执行标准',
            // qrCode:''
          },
          {
            "address": "1",
            "attention_item": "1雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪",
            "company_id": 22,
            "created_time": "2023-03-23 21:31:11",
            "created_user_id": 2157,
            "created_user_name": "111222",
            "enterprise": "1",
            "exec_std": "1雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪",
            "feature": "1雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪",
            "goods_code": "123",
            "hns_require": "1雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪",
            "id": 3,
            "is_del": "0",
            "net_content": "1",
            "product_code": "123",
            "product_name": "1",
            "tech_index": "1雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪",
            "telephone": "1",
            "updated_time": "2023-03-24 13:37:31",
            "updated_user_id": 2157,
            "updated_user_name": "111222",
            "use_method": "1雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪铁龙雪",
            "qrCode": ""
          },
          {
            "address": "湖北武汉",
            "attention_item": "无",
            "company_id": 22,
            "created_time": "2023-03-22 17:43:02",
            "created_user_id": 2157,
            "created_user_name": "111222",
            "enterprise": "湖北雪佛兰",
            "exec_std": "无",
            "feature": "无",
            "goods_code": "001",
            "hns_require": "无",
            "id": 1,
            "is_del": "0",
            "net_content": "1.5",
            "product_code": "001",
            "product_name": "雪弗兰C6",
            "tech_index": "无",
            "telephone": "17899998888",
            "updated_time": "2023-03-22 17:43:01",
            "use_method": "无",
            "qrCode": ""
          }
        ]
      }
    },
    mounted() {
      this.getDatalist()
    },
    methods: {
      getDatalist() {
        this.list.forEach(item => {
          const qrCodeData = JSON.stringify(item);
          console.log(qrCodeData, 'qrCodeData')
           const qrCodeUrl = `https://www.baidu.com/h5?data=${qrCodeData}`;
          const qrCodeImage = new QRCode(document.getElementById("qrcode"), {
            text: qrCodeUrl,
            width: 128,
            height: 128,
            colorDark: "#000000",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.L
          });
          console.log(qrCodeImage, '=====qrCodeImage')
          item.qrCode = qrCodeImage._oDrawing._elCanvas.toDataURL("image/png");
          console.log(' item.qrCode', item.qrCode)
        });


      },
    }
  }
</script>

<style>
  #qqq {
    background-color: #111;
    width: 300px;
    height: 300px;
    margin: 0 auto;
    /*水平居中*/
    position: relative;
  }

  .qrcode {
    display: inline-block;
    margin: 0 auto;
    /*水平居中*/
    position: relative;
    top: 15%;
  }

  .qrcode img {
    width: 200px;
    height: 200px;
    background-color: #fff;
    padding: 6px;
  }
</style>

 分享二维码

<template>
  <div>
    <div id="qqq">
      <div class="qrcode" ref="qrCodeUrl"></div>
    </div>
    <div id="qrcode">
    </div>
    <el-button type="primary">主要按钮</el-button>
    <el-table :data="list" height="250" border style="width: 100%">
      <el-table-column prop="product_code" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="product_name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="tech_index" label="地址">
      </el-table-column>
      <el-table-column prop="qrCode" label="二维码">
        <template slot-scope="scope">
          <el-image :src="scope.row.qrCode" :preview-src-list="[...scope.row.qrCode]"></el-image>
        </template>
      </el-table-column>
    </el-table>
<div class="fl">分享到：</div>
<div onclick="shareTo('qzone')">
    <img src="http://zixuephp.net/static/images/qqzoneshare.png" width="30">
</div>
<div onclick="shareTo('qq')">
    <img src="http://zixuephp.net/static/images/qqshare.png" width="32">
</div>
<div onclick="shareTo('sina')">
    <img src="http://zixuephp.net/static/images/sinaweiboshare.png" width="36">
</div>
<div onclick="shareTo('wechat')">
    <img src="http://zixuephp.net/static/images/wechatshare.png" width="32">
</div>
  </div>


</template>
<script>
 
    function shareTo(stype){
        var ftit = '';
        var flink = '';
        var lk = '';
        //获取文章标题
        ftit = $('.pctitle').text();
        //获取网页中内容的第一张图片
        flink = $('.pcdetails img').eq(0).attr('src');
        if(typeof flink == 'undefined'){
            flink='';
        }
        //当内容中没有图片时，设置分享图片为网站logo
        if(flink == ''){
            lk = 'http://'+window.location.host+'/static/images/logo.png';
        }
        //如果是上传的图片则进行绝对路径拼接
        if(flink.indexOf('/uploads/') != -1) {
            lk = 'http://'+window.location.host+flink;
        }
        //百度编辑器自带图片获取
        if(flink.indexOf('ueditor') != -1){
            lk = flink;
        }
        //qq空间接口的传参
        if(stype=='qzone'){
            window.open('https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url='+document.location.href+'?sharesource=qzone&title='+ftit+'&pics='+lk+'&summary='+document.querySelector('meta[name="description"]').getAttribute('content'));
        }
        //新浪微博接口的传参
        if(stype=='sina'){
            window.open('http://service.weibo.com/share/share.php?url='+document.location.href+'?sharesource=weibo&title='+ftit+'&pic='+lk+'&appkey=2706825840');
        }
        //qq好友接口的传参
        if(stype == 'qq'){
            window.open('http://connect.qq.com/widget/shareqq/index.html?url='+document.location.href+'?sharesource=qzone&title='+ftit+'&pics='+lk+'&summary='+document.querySelector('meta[name="description"]').getAttribute('content')+'&desc=php自学网，一个web开发交流的网站');
        }
        //生成二维码给微信扫描分享，php生成，也可以用jquery.qrcode.js插件实现二维码生成
        if(stype == 'wechat'){
            window.open('http://zixuephp.net/inc/qrcode_img.php?url=http://zixuephp.net/article-1.html');
        }
    }
 
</script>