Vue2 qrcode+html2canvas 实现二维码的生成和保存

news2024/11/10 6:48:06

1.安装

npm install qrcode

npm install html2canvas

2.引用

import QRCode from 'qrcode'

import html2canvas from 'html2canvas'

效果:

1.

二维码生成: 

 下载二维码图片:

二维码的内容:

实现代码:

<template>
  <div class="main-body module-contain">
    <div>我是测试的二维码内容h5页面: http://xxxx:8080/qrcodeContain</div>
    <div class="generateQRcode-top"
         ref="qrcodeBox"
         v-show="isShowText">
      <!-- 我是测试的二维码内容 -->
      <div ref="qrcodeContainer"
           class="qr-code"></div>
      <div class="qr-txt">产品编号: xxxx</div>
    </div>
    <el-button type="primary"
               @click="generateQRCode">生成二维码</el-button>
    <el-button type="primary"
               @click="saveQRCode">保存二维码</el-button>
  </div>
</template>

<script>
import QRCode from 'qrcode'
import html2canvas from 'html2canvas'
export default {
  data () {
    return {
      isShowText: false,
      qr: 'http://xxxx:8080/qrcodeContain' // 二维码内容-网址/数字/字母 // 可以用网上的地址测试,例如:https://www.bilibili.com/guochuang/?spm_id_from=333.1007.0.0
    }
  },
  components: {
  },
  mounted () {
  },
  methods: {
    // 生成二维码
    generateQRCode () {
      this.isShowText = true
      //每次生成的时候清空内容,否则会叠加,二维码背景色透明会一目了然
      if (this.$refs.qrcodeContainer) {
        this.$refs.qrcodeContainer.innerHTML = ''
      }
      QRCode.toDataURL(this.qr, { errorCorrectionLevel: 'H' }, (err, url) => {
        if (err) console.error(err)
        // 将二维码URL设置到容器的背景图片
        this.$refs.qrcodeContainer.style.backgroundImage = `url(${url})`
      })
    },
    // 保存二维码
    async saveQRCode () {
      // 使用html2canvas将二维码容器转换为图片
      try {
        const canvas = await html2canvas(this.$refs.qrcodeBox)
        // 创建一个图片元素
        const img = new Image()
        img.src = canvas.toDataURL('image/png')
        // 创建一个链接元素
        const link = document.createElement('a')
        // 设置下载的文件名
        link.download = '二维码.png'
        // 触发点击
        link.href = img.src
        link.click()
      } catch (error) {
        console.error(error)
      }
    },
  }
}
</script>

<style lang="less" scoped>
.module-contain {
  .generateQRcode-top {
    display: flex;
    // justify-content: space-between;
    // align-items: center;
    width: 360px;
    // height: 200px;
    margin: 20px 0;
    background-color: #fff;
    border: 1px solid #eee;
    .qr-code {
      width: 180px;
      height: 180px;
      background-position: 50% 50%;
      background-repeat: no-repeat;
      background-size: contain;
      text-align: center;
      font-size: 20px;
      font-weight: bold;
    }
    .qr-txt {
      padding: 12px 0;
      font-size: 14px;
    }
  }
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2134808.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Linux进程优先级

&#x1f4dd;目录 &#x1f31f; 查看进程信息&#x1f31f; PRI and NI 风过无痕 忘川如斯 如日方升 策引千问 &#x1f31f; 查看进程信息 ps -l命令 UID : 代表执行者的身份PID : 代表这个进程的代号PPID &#xff1a;代表这个进程是由哪个进程发展衍生而来的&#xff0c…

二维码模组扫码器C#实现串口自动监听功能

C# Demo&#xff0c;调用二维码模块的tx_windows_hidpos.dll扫码库&#xff0c;支持QR-M20 、QR-M10、QR-M30等二维码型号。 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Text; using…

超级好用的化妆神器,一键迁移妆容,觉得别人化妆真好看,看我一键迁移到自己的脸上!(附工作流)

这两天开源社区又出了一个比较有趣的ComfyUI 插件&#xff0c;功能很简单&#xff0c;可以实现妆容的一键迁移。 操作也很简单&#xff0c;只需要上传一张带有妆容的人物照片&#xff0c;再上传一张想要迁移妆容的照片&#xff0c;就可以把参考人物的妆容迁移到想要迁移的人物…

深入分析计算机网络性能指标

速率带宽吞吐量时延时延带宽积往返时间RTT利用率丢包率图书推荐内容简介作者简介 速率 连接在计算机网络上的主机在数字信道上传送比特的速率&#xff0c;也称为比特率或数据率。 基本单位&#xff1a;bit/s&#xff08;b/s、bps&#xff09; 常用单位&#xff1a;kb/s&#x…

大模型能否真正理解上下文?

人工智能咨询培训老师叶梓 转载标明出处 尽管对LLMs的评估涵盖了自然语言处理&#xff08;NLP&#xff09;的各个领域&#xff0c;但对它们理解上下文特征的语言能力的探讨却相对有限。为了填补这一空白&#xff0c;乔治城大学和苹果公司的研究者们共同提出了一种新的上下文理解…

HW行动指南,前辈教你如何真正靠护网赚到钱!

‍正文&#xff1a; HW行动&#xff0c;攻击方的专业性越来越高&#xff0c;ATT&CK攻击手段覆盖率也越来越高&#xff0c;这对于防守方提出了更高的要求&#xff0c;HW行动对甲方是一个双刃剑&#xff0c;既极大地推动了公司的信息安全重视度和投入力量&#xff0c;但同时…

【目标检测数据集】水泥搅拌车数据集2165张VOC+YOLO格式

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;2165 标注数量(xml文件个数)&#xff1a;2165 标注数量(txt文件个数)&#xff1a;2165 标注…

【LeetCode】每日一题 2024_9_14 从字符串中移除星号(模拟)

前言 每天和你一起刷 LeetCode 每日一题~ LeetCode 启动&#xff01; 今天的题目曾经的我做过了 . . . 又是复习的一天 题目&#xff1a;从字符串中移除星号 代码与解题思路 func removeStars(s string) string {// 本题的核心&#xff1a;生成的输入保证总是可以执行题面中…

ImportError: DLL load failed while importing _ssl: 找不到指定的模块的解决方法

ImportError: DLL load failed while importing _ssl: 找不到指定的模块的解决方法 现象解决办法 现象 在命令行中&#xff0c;可以正常导入_ssl模块&#xff0c;如下&#xff1a; Python 3.9.0 (default, Nov 15 2020, 08:30:55) [MSC v.1916 64 bit (AMD64)] :: Anaconda, …

【Qt | QLineEdit】Qt 中使 QLineEdit 响应 鼠标单击、双击事件 的两个方法

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; ⏰发布时间⏰&#xff1a; 2024-09-14 …

做外贸为什么要做谷歌seo?

跟国内不同&#xff0c;购物有多个大平台可供选择&#xff0c;在海外是有很多人会在谷歌搜索上寻找自己想要的产品或者服务的&#xff0c;海外谷歌那是真正的老大哥&#xff0c;你想要的都能搜到&#xff0c;而谷歌的流量以及准确性&#xff0c;都不是国内以及购物平台可以比拟…

Vue组合式API:setup()函数

1、什么是组合式API Vue 3.0 中新增了组合式 API 的功能&#xff0c;它是一组附加的、基于函数的 API&#xff0c;可以更加灵活地组织组件代码。通过组合式 API 可以使用函数而不是声明选项的方式来编写 Vue 组件。因此&#xff0c;使用组合式 API 可以将组件代码编写为多个函…

H3C CAS系列开篇之CAS初认识

一、前言 基于信创需要,某项目中的VMware软件存求替代方案,尤其在Virtual Desktop Infrastructure(VDI)方面,寻求使用紫光集团旗下H3C的CAS云计算管理平台,又称CAS虚拟化解决方案/管理系统,H3C CAS是H3C公司面向数据中心自主研发的企业级虚拟化软件。CAS提供了强大的虚拟…

nz-select 数据回显失败,大模型救了我一命。

文章目录 前言问题现象问题解决经过数据类型的问题&#xff1f;求助大模型问题解决 小小的疑问 前言 最近老苦逼了。原本计划推进的《软件开发人员从0到1实现物联网项目》项目因为种种原因停滞了将近一个月&#xff0c;进展缓慢。其中一个原因就和本文有关。 继《时隔5年重拾…

MySQL迁移达梦,部分数据写入失败,VARCHAR字段长度不足

迁移时&#xff0c;字符长度选择“4”即可。如果是GBK可选择“2”。

八道指针笔试题

文章目录 笔试题1笔试题2笔试题3笔试题4笔试题5笔试题6笔试题7笔试题8 笔试题1 int main() { int a[5] { 1, 2, 3, 4, 5 }; int *ptr (int *)(&a 1); printf( "%d,%d", *(a 1), *(ptr - 1)); return 0; } //程序的结果是什么&#xff1f;首先定义了一个数组…

数据结构————双链表

目录 一、单链表的定义及其特点 定义&#xff1a; 特点&#xff1a; 双链表的优缺点 双链表的关键特性 二、双链表的实现 准备工作&#xff1a; 自定义数据元素类型&#xff1a; 1.双链表的创建 1.1头插法介绍 1.2尾插法介绍 2.双链表的初始化 3.双链表的求表长 4.…

TDengine 与 SCADA 强强联合:提升工业数据管理的效率与精准

随着时序数据库&#xff08;Time Series Database&#xff09;的日益普及&#xff0c;越来越多的工业自动化控制&#xff08;工控&#xff09;人员开始认识到其强大能力。然而&#xff0c;时序数据库在传统实时数据库应用领域&#xff0c;特别是在过程监控层的推广仍面临挑战&a…

cmd命令

常用命令 查看电脑名称&#xff1a; hostname 查看网卡信息&#xff1a; ipconfig 快速打开网络设置界面&#xff1a; control.exe netconnections 或 rundll32.exe shell32.dll,Control_RunDLL ncpa.cpld 打开防火墙设置&#xff1a; wf.msc 指定网卡设置IP地址&#…

linux_L1_linux重启服务器

使用putty登录到linux服务器切换到管理员账号 sudo -s重启命令 reboot