Qrcode front-end generates two-dimensional code, list cycle, can download and share, additional functions

Foreword:

Project requirements, the prototype list requires the display of QR codes, and the backend did not return this parameter to me for some reason, so I had no choice but to do it myself, so I have the following operations, and this article will sort it out.

The main function:

1. Generate QR code

2. Render the list

3. Generate image download

4. Share the QR code

let's start

Prototype

demo renderings:

First come a few renderings

Another scan to identify

Generate QR code

install command

npm install qrcodejs2 --save

page import

import QRCode from "qrcodejs2";

Realize 1 writing method

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

Realize 2 writing

     
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
        });
      },

Download QR code

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();
}

render list

<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>

Share QR code

<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>

Qrcode front-end generates two-dimensional code, list cycle, can download and share, additional functions

Qrcode front-end generates two-dimensional code, list cycle, can download and share, additional functions

Generate QR code

Download QR code

render list

Share QR code

Guess you like