前端生成二维码，且可以下载

首先项目引入依赖包 npm install qrcodejs2

然后在指定页面引入 import QRcode from "qrcodejs2"

页面部分，我的是一个弹窗

<el-dialog

title="二维码"

:visible.sync="dialogVisible"

center

<div>

</div>

</el-dialog>

点击查看二维码

handleQrcodde(){

this.dialogVisible = true

setTimeout(()=>{

document.getElementById("qrcodde").innerHTML = "" //每次清空元素，防止叠加

let qrcode = new QRcode("qrcode",{

width:188,

height:188,

colorDark:'#666',

colorLight:'#fff'

})

qrcode.clear();

qrcode.makeCode('二维码内容')

},500)

}

下载二维码

downloadQrcode ( fileName , content ){

let canvas = document . getElementsByTagName (" canvas ")[0]

let base64Img= canvas . toDataURL ("");

let link = document . createElement (" a ");

link. href =base64Img

link . download =" code + Date . now ();

let event = document . createEvent (" MouseEvents ");

event . initMeuseEvent (
click ",
true ,
false ,
window ,
false ,
false ,
false ,
false ,
nu11

)

link . dispatchEvent ( event );

}

前端生成二维码，且可以下载相关推荐

前端生成二维码qrcode.js，并下载
利用qrcode.js在前端生成二维码,并下载一.引入js包 <script type="text/javascript" src="//static.runoo ...
vue前端生成二维码，实现扫码下载功能
vue前端生成二维码,实现扫码下载功能首先需要安装一个插件 npm install --save qrcodejs2 然后在需要的页面引入插件,最后使用 <template><di ...
前端批量生成二维码并打包下载
前端批量生成二维码并打包下载项目中遇到一个紧急需求在没有后端配合的情况下,前端独自实现生成二维码并打包下载生成二维码:下载 qrcodejs2 批量打包下载:下载 JSZip 和 FileSave ...
微信小程序前端生成二维码并保存（海报同理）
这里写自定义目录标题 1.前端生成二维码并保存 1.前端生成二维码并保存 1.下载weapp.qrcode.js文件并引入项目中 2.先在wxml文件中构建canvas画布 <canvas st ...
前端生成二维码与图片合成
首先前端生成二维码使用插件完成,插件为DrawQRCode.unitypackage 合成二维码直接使用DrawQRCode 类里提供的方法即可生成二维码的方法 DrawCode_Color32 ...
微信小程序实现生成二维码功能并下载到本地
微信小程序实现生成二维码功能并下载到本地背景实现备注背景有这样一个需求,后台返回了url地址,微信小程序将url地址转成二维码图片,展示在页面上,并且该二维码图片可下载到用户手机相册中实现 ...
前端生成二维码（借助草料）
前端生成二维码. 使用草料API: generateQrCode(qrCode) {window.location.href = `https://cli.im/api/qrcode/code?tex ...
百万前端之js通过链接生成二维码可以保存下载复制
在前端工作中,会遇到很多邀请好友的需求,这个时候就需要前端对需求进行实现了. 最终效果: 这个是做好以后的成品,根据链接生成二维码,提供保存二维码和复制链接功能,纯前端实现.话不多说直接上代码 htm ...
vue前端生成二维码并导出PDF
1.安装插件 npm install --save qrcodejs2 (这是生成微信二维码插件) npm install html2canvas jspdf --save (这是将html页面转化为 ...

前端生成二维码，且可以下载

前端生成二维码，且可以下载相关推荐

最新文章

热门文章