生成二维码及下载到本地

最新推荐文章于 2023-07-24 16:22:34 发布

wzx_yyzc_wdnf

最新推荐文章于 2023-07-24 16:22:34 发布

阅读量236

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/wzx_yyzc_wdnf/article/details/128530738

版权

本文介绍如何在Vue.js项目中使用html2canvas和qrcodejs2库生成二维码，并将其下载到本地。首先，通过npm安装两个依赖库，然后在页面中引入，设置二维码显示位置，最后实现二维码的生成和下载功能。

摘要由CSDN通过智能技术生成

1.安装html2canvas，qrcodejs2

npm install qrcodejs2 -save

npm install --save html2canvas

2.所需页面引入

import QRCode from 'qrcodejs2' 
import html2canvas from "html2canvas"

3.二维码显示位置

<div ref="pay_OR_code" id="pay_OR_code">
    <p class="pay_order_title">【数学】xxxxxxxxxx</p>
    <div class="money">￥<span class="num">128</span><span > / 3次学习</span></div>
    <div class="pay_code">
       <div class="item-pic"  id="qrinvitecode"></div>
    </div>
    <p class="order_number">支付订单号：<span>xxxxxxxxxxxxxxxx</span></p>
    <p class="order_type">请使用<span>{
  {payType}}</span>扫描二维码完成支付</p>
    <p