vue 使用qrcode生成二维码并可下载保存

  1. 安装qrcode
shell 复制代码
npm install qrcode --save
  1. 代码
html 复制代码
<template>
	<div style="display: flex; flex-direction: column; align-items: center; justify-content center;">
       <div>查看溯源码,<a id="saveLink" style="text-decoration:underline">点击保存</a></div>
       <canvas id="qrcode-canvas"></canvas>
     </div>
</template>
<script>
import QRCode from 'qrcode'
export default {
	return data(){
		url: "", //待生成二维码的data
	},
	mounted(){
		generateQRCode(this.url)
	}
}

generateQRCode(url) {
  const canvas = document.getElementById('qrcode-canvas') // 在模板中的canvas元素设置id为 qrcode-canvas
  QRCode.toCanvas(canvas, url, {width:120,height:120})
  var dataURL = canvas.toDataURL("image/png")
  
  const a = document.getElementById("saveLink")
  a.href = dataURL
  a.download = `二维码.png` // 报文到本地时的文件名称
}
</script>
  1. 演示
相关推荐
速易达网络1 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘1 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way1 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家2 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689972 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽3 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头4 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全4 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing4 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript