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. 演示
相关推荐
YGY Webgis糕手之路1 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔1 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang1 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔1 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任2 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas
烛阴2 小时前
Mix - Bilinear Interpolation
前端·webgl
90后的晨仔2 小时前
Vue 3 应用实例详解:从 createApp 到 mount,你真正掌握了吗?
前端·vue.js
德育处主任2 小时前
p5.js 矩形rect绘制教程
前端·数据可视化·canvas
前端工作日常2 小时前
我学习到的babel插件移除Flow 类型注解效果
前端·babel·前端工程化
SY_FC2 小时前
uniapp input 聚焦时键盘弹起滚动到对应的部分
javascript·vue.js·elementui