1. Toy模板网首页
  2. >Toy博客

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

1年前作者：痴心阿文分类：Toy博客阅读(14)违法举报

这篇具有很好参考价值的文章主要介绍了Qrcode前端生成二维码，列表循环，可以下载分享，附加功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

前言: 

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

        主要功能:

                1.生成二维码

                2.渲染列表

                3.生成图片下载

                4.分享二维码

下面开始吧

 原型图

new qrcode,javascript,前端,javascript,vue.js

 demo效果图：

  

先来几张效果图

new qrcode,javascript,前端,javascript,vue.js

 再来个扫码识别出来的

new qrcode,javascript,前端,javascript,vue.js

 生成二维码

 安装命令

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写法 文章来源地址https://www.toymoban.com/news/detail-775729.html

     
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>

到了这里，关于Qrcode前端生成二维码，列表循环，可以下载分享，附加功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包赞助服务器费用

相关文章

  • vue批量生成二维码，打印生成的二维码，并批量下载生成的二维码，qrcode

    vue批量生成二维码，打印生成的二维码，并批量下载生成的二维码，qrcode

    通过使用 qrcode 生成二维码， 使用 jszip 打包批量二维码文件， 使用 file-saver 下载打包好的zip文件， 使用 vue-print-nb 打印生成的二维码 配置项： width 二维码宽度 height 二维码高度 errorCorrectionLevel 二维码纠错级别，指二维码被遮挡可以扫出结果的区域比例 color: 7. 打印生成的二

    2024年02月01日
    浏览(14)

  • 使用jquery.qrcode生成二维码

    1、首先在页面中加入jquery库文件和qrcode插件。 2、在页面中需要显示二维码的地方加入以下代码： 3、生成二维码 qrcode支持canvas和table两种方式进行图片渲染，默认使用canvas方式，效率最高，当然要浏览器支持html5。直接调用如下 也可以通过以下方式调用： 这样就可以在页面

    2024年02月06日
    浏览(35)
  • C# QRCode二维码的解析与生成

    C# QRCode二维码的解析与生成

    已知一张二维码图片，怎么生成一张一模一样的图片出来？ 最近有个项目，需要用到QRCode，之前只做过Datamatrix格式的，想着应该也是差不多的，于是就依葫芦画瓢，掏出我的陈年OnBarcode类库，一通修改，生成了个崭新的QRCode，与客户提供的二维码图片一比对，虽然扫出来内

    2024年02月12日
    浏览(13)

  • 详解Python生成二维码插件QrCode的使用

    二维码（QR Code）是一种常见的矩阵型条码，被广泛用于扫码支付、产品标识、活动推广等领域。Python提供了许多第三方库用于生成和解析二维码，其中最常用的是qrcode库。本文将介绍如何使用qrcode库来生成二维码，并提供相应的代码示例和详细说明。 在开始之前，我们需要

    2024年02月16日
    浏览(14)
  • tki-qrcode插件二维码的生成

    tki-qrcode插件二维码的生成

    1、全局安装tki-qrcode插件 2、查看下载插件后的版本信息 3、在页面中引入tki-qrcode 4、生成二维码整体代码 5、效果展示 此样式是平时黑色二维码样式，此为打过马赛克的二维码（不打马赛克博客无法展示图片，无奈（O~O） 注： 二维码中的内容可绑定链接和其他内容值 根据自

    2024年02月09日
    浏览(17)
  • vue：生成二维码 qrcode、vue-qr（二维码中间可带logo）

    vue：生成二维码 qrcode、vue-qr（二维码中间可带logo）

    一、方法一 qrcode qrcode - npm 1.1、安装 yarn add qrcode 1.2、页面引入 1.3、方法里边使用  二维码url： ​​​​​​​  1.4、options 名称 类型 默认值 说明 errorCorrectionLevel String M 错误处理级别。可选值： low ,  medium ,  quartile ,  high  or  L ,  M ,  Q ,  H maskPattern Number 可选值： 0 , 

    2023年04月12日
    浏览(12)
  • 动态二维码生成器PHP Dynamic QRcode

    动态二维码生成器PHP Dynamic QRcode

    什么是 PHP Dynamic QRcode ？ PHP Dynamic QRcode 是一个允许生成和保存动态和静态二维码（ QR 码）的应用。它具有简洁、响应灵敏且用户友好的设计。其中包含您网站中可能需要的一般功能，如：记录管理（ CRUD ）、安全身份验证、分页、过滤器。 什么是 Dynamic Qr codes ? Dynamic Qr co

    2024年02月11日
    浏览(12)

  • 微信小程序生成二维码（weapp-qrcode）

    插件 npm 地址：https://www.npmjs.com/package/weapp-qrcode 插件 GitHub 地址：https://github.com/yingye/weapp-qrcode/tree/master 一、引入 1、根据 GitHub 指引将 weapp-qrcode 放到本地 uitl 文件夹下； 2、创建 canvas 3、在 js 文件中引入 weapp-qrcode 以及使用； 这里是添加了 logo 的二维码；相关参数请参考

    2024年02月15日
    浏览(23)

  • vue3 qrcode 生成二维码展示 亲测可用

    网上找的好多vue3 生成二维码代码都不能用，正确办法如下 安装 script template

    2024年02月09日
    浏览(16)

  • 微信小程序生成二维码插件weapp-qrcode.js

    首先创建weapp-qrcode.js文件 然后复制一下内容到weapp-qrcode.js文件 然后在index.wxml文件写入 在index.js文件写入 效果如下：  

    2024年02月12日
    浏览(11)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包