记录使用QRCode 显示并下载二维码图片

记录使用QRCode 生成二维码

项目安装qrcode 命令：npm install --save qrcodejs2
引入 import QRCode from ‘qrcodejs2’
后端提供qrcodeId
使用场景vue element el-table

例如表格数据tableData

mounted(){this.tableData = [ {qrCodeId:'147152707256324096'} ]this.tableData.forEach(item=>{this.qrcodeFun(item.qrCodeId)})
}

表格内

<el-table-column  label='二维码'><template slot-scope='scope'><div :id="'qrcode'+scope.row.qrCodeId" class='qrcode-box'></div></template>
</el-table-column>

初始化数据时调用下面方法

method:{/*** 生成二维码图片* @param qrcodeId  二维码url* */qrcodeFun(qrcodeId){//防止未渲染页面就调用方法找不到对应元素Idthis.$nextTick(()=>{// 'qrcode'+qrcodeId保证id唯一性document.getElementById('qrcode'+qrcodeId).innerHTML = '';new QRCode( 'qrcode'+qrcodeId,{width:100,height:100,text:qrcodeId,colorDark:'#000',colorLight:'#fff',correctLevel:QRCode.CorrectLevel.H})})},
}

 /*** 打印二维码* @param qrcodeId  二维码url* */printQRCode(qrcodeId){const myCanvas = document.getElementById('qrcodeDown'+qrcodeId).getElementsByTagName('canvas')const a = document.createElement('a');a.href = myCanvas[0].toDataURL('image/png').replace('image/png', 'image/octet-stream')a.download = '设备二维码'+new Date().getTime()+'.png'a.click()this.$message.success('正在下载。');},

最终显示如下

记录使用QRCode 显示并下载二维码图片相关推荐

vue3+qrcode插件实现下载二维码图片（.png、.svg格式）
注释:qrcode可通过canvas的toDataURL方法下载对应的png图片,比较恶心的是下载svg格式(必须记录一下) 安装一下qrcode插件 npm i qrcode --save 或 ya ...
QRCode 生成和下载二维码
使用注意事项: 1.url必须带通信协议 2.生成二维码前必须先清空二维码,不然会重复生成二维码(文章最后) 1.引入插件QRCode QRCode.js 是一个用于生成二维码的 JavaScript ...
Java生成二维码并以IO流的形式返回给前端展示(不需写入服务器)，以及下载二维码图片
目录场景方案分析第一步--引入依赖第二步--编写工具类第三步--编写API接口第四步--访问测试第五步--下载图片场景最近笔者做的项目中,有一个需求: 在系统中生成一个二维码,用户保 ...
uniapp weapp-qrcode.js生成二维码，并下载二维码图片
找了很多插件,但是都太复杂,不符合自己的要求找了个最简单的.weapp-qrcode.js ,生成二维码没有问题,但是下载图片获取不到图片路径,自己稍微改造了一下 https://github.co ...
利用qrcode.js生成二维码，并点击按钮下载二维码图片（亲测可用）
话不多说,先上代码(复制即用): <!DOCTYPE html> <html lang="en"> <head><meta charset ...
点击按钮，下载二维码图片
const img = new Image();img.setAttribute('crossOrigin', 'anonymous');img.onload = () => {const ca ...
QRCODE 根据url生成二维码图片
https://www.npmjs.com/package/qrcode 使用起来比较简单就不多赘述了详情见文档 //引入 import QRCode from "qrcode" ...
react二维码qrcode.react以及点击二维码的下载二维码图片
npm install qrcode.react 参考文档程序如下, const QRCode = require('qrcode.react'); export default class Pro ...
vue：实现前端生成并下载二维码（使用qrcodejs2插件）
需求点击按钮下载二维码,并命名为"奶绿走糖-二维码". HTML <button @click="getPersonCode()">下载二维码&l ...

记录使用QRCode 显示并下载二维码图片

记录使用QRCode 生成二维码

记录使用QRCode 显示并下载二维码图片相关推荐

最新文章

热门文章