一次循环动态打印输出多张不同内容二维码 QRCODE方法is not a function 以及遇到的其他问题 已解决

在实现动态循环生成二维码并打印的过程中,遇到QRCODE.js未调用生成图片方法导致打印时图片不显示的问题。通过深入研究QRCODE.js源码,发现循环中仅生成了CANVAS而未生成IMG。为解决此问题,需要将CANVAS转化为DataURL。然而直接使用.toDataURL方法报错,需确保针对原生CANVAS。最终通过调整代码,成功实现循环内二维码的正确打印。

关于循环生成动态二维码遇到的QRCODE.JS不调用生成图片方法打印图片不显示

JQUERY JS 请自行转化,本例俩种方法混合使用

  1. 需求
    由于有需求,需要做一个标签,左边是动态流水号,动态箱号,右边是根据左边内容变化,
    在这里插入图片描述

  2. 在写代码的时候,把生成二维码的QRCODE 调用方法写在了循环里,结果调试发现,预览界面生成的都是CANVAS的二维码,但是window.print()打印inner HTML 打印不出来 CANVAS 内容.
    QRCODE 方法生成了一个CANVAS和一个IMG区域,默认CANVAS DISPLAY:BLOCK
    img DISPLAY:NONE
    在这里插入图片描述查看QRCODE.js 发现了在这里生成的IMG,断点调试发现在进入循环后,生成二维码的方法就只进行了生成CANVAS的操作,后面没有,于是想到强转。

  3. 转化成功
    找了好多资料,都是直接说用.todataURL 转化,但是都不行,都会提示.todataURL is not a function,后来只在一个地方找到todataURL 只能针对原生CANVAS 也就是下例:

var c = document.createElement('canvas');
c.toDataURL();

针对非原生canvas,需要加一个定义

$("#qrCode" ).find("canvas")
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值