html动态生成下载二维码

一，引包

<script src="js/jquery.qrcode.min.js"></script>
<script src="js/jquery.min.js"></script>

二，body中定义

<button type="button" onclick="clickGenealogy()">二维码</button><button type="button" onclick="downloadClick()">下载</button><a id="downloadLink"></a><div id="qrcode"></div>

三，方法

function clickGenealogy() {alert("开始点击");var qrcode = $('#qrcode').qrcode({width: 128,height: 128,text: "二维码的内容"});}function downloadClick () {var canvas = $('#qrcode canvas')[0];url = canvas.toDataURL('image/png');// 构造a标签并模拟点击var downloadLink = $('#downloadLink').attr("href", url).attr("download", "二维码.png");downloadLink[0].click();}

扩展：将base64图片构建成画布并模拟点击a标签下载

//jsfunction downloadClick () {// 获取base64的图片节点var img = document.getElementById('qrcode').getElementsByTagName('img')[0];// 构建画布var canvas = document.createElement('canvas');canvas.width = img.width;canvas.height = img.height;canvas.getContext('2d').drawImage(img, 0, 0);// 构造urlurl = canvas.toDataURL('image/png');// 构造a标签并模拟点击var downloadLink = document.getElementById('downloadLink');downloadLink.setAttribute('href', url);downloadLink.setAttribute('download', '二维码.png');downloadLink.click();}//jqueryfunction downloadClick () {// 获取base64的图片节点var img = $('#qrcode img')[0];// 构建画布var canvas = document.createElement('canvas');canvas.width = img.width;canvas.height = img.height;canvas.getContext('2d').drawImage(img, 0, 0);// 构造urlurl = canvas.toDataURL('image/png');// 构造a标签并模拟点击var downloadLink = $('#downloadLink').attr("href", url).attr("download", "二维码.png");downloadLink[0].click();}

html动态生成下载二维码相关推荐

vue 动态生成下载二维码
菜花记录 vue项目如何动态生成一个下载二维码项目中二维码动态配置好下载链接,现场直接修改配置就可以调试第一步先直接在终端下载vue插件 npm install vue-qriously --sa ...
【Vue+Java】前后端联动生成下载二维码
目录指引背景运用场景环境丑话说在前前端部分通过axios请求传参二次封装axios.create方法定义download方法,通过axios进行传参前端vue页面方法 HTML部分按 ...
javascript动态生成网址二维码图片
这个实现二维码生成功能的是引用谷歌google的JS来实现的,可以兼容几乎所有浏览器,包括动态和静态网页,具有加载速度快的特点! 代码如下: 放到你想添加二维码的位置 ; <script typ ...
vue生成app二维码，并扫码下载app
文章目录项目需求开发 web官网下载页的开发 web官网地址生成下载二维码项目需求公司要做一个web官网的下载页面,功能是微信扫码可以直接下载Ios手机端app.Android手机端app.及 ...
java+vue的二维码生成，二维码上传服务器，二维码的压缩包下载
一. vue页面生成二维码 <template><div class="app-container">//在页面放着二维码的div<div id=&q ...
qrcode.js 生成二维码包含logo和背景图片及IE下载二维码
思路: 1. 通过qrcode.js 生成带logo的二维码 2. 将背景图片.logo与生成的二维码图通过canvas 绘制在一起形成一个新的canvas 3. 将canvas 转成base64的u ...
vue引用qrcodejs2生成、下载二维码、复制到剪贴板
使用的vue2.x版本,UI框架为ant design vue 1.X版本 1.场景:页面需要展示二维码并且需要下载二维码的功能效果图: 引用插件: yarn add qrcodejs2@0.0.2 ...
点击识别元素位置、生成显示二维码、下载二维码
百度网盘地址效果: 代码: <!DOCTYPE html> <html><head><meta charset="UTF-8">& ...
vue：实现前端生成并下载二维码（使用qrcodejs2插件）
需求点击按钮下载二维码,并命名为"奶绿走糖-二维码". HTML <button @click="getPersonCode()">下载二维码&l ...

html动态生成下载二维码

html动态生成下载二维码相关推荐

最新文章

热门文章