资讯专栏INFORMATION COLUMN

解决jquery.qrcode.min.js在IE6-IE8生成的二维码,打印不显示的问题

yimo / 954人阅读

摘要:在上不支持,则通过的方式渲染也可以将二维码在页面上显示。这样的话就不用考虑以上的兼容问题。不过还是决绝的项目中的问题。

jquery.qrcode.min.js 兼容 IE6

使用方式


// 渲染二维码 $(function() { var url = window.location.href; $("#qrcode").qrcode({ render: "table", // 渲染方式有table方式和canvas方式 width: 150, //默认宽度 height: 150, //默认高度 text: url, //二维码内容 typeNumber: -1, //计算模式一般默认为-1 correctLevel: 2, //二维码纠错级别 background: "#ffffff", //背景颜色 foreground: "#000000" //二维码颜色 }); })
问题描述

通过 jquery.qrcode.min.js 在前端生成二维码,并且调用 window.print(); 需要将二维码打印出来,那么问题来了。

渲染方式有table方式和canvas方式, 使用canvas必须在支持canvas的浏览器才能使用,比如:火狐,谷歌,IE9+ 以及其它支持canvas的浏览器中使用。

在IE6上(不支持canvas),则通过table的方式渲染也可以将二维码在页面上显示。但是通过 window.print();二维码显示不出来,table方式渲染就是通过往td中填充background-color来显示每个点的。由于浏览器在调用打印方法的时候会忽略调背景颜色。

解决思路

为确保IE6上也能够正常使用,可以在原有的td中添加div,使用divborder-top上边框设置为长和宽相等形成二维码的每一个小点,其余的border-leftborder-rightborder-bottom都设为0px

修改后的代码

gitee:https://gitee.com/jiangshaone...

以下仅为修改的部分代码

// 以下是我修改的部分
......
c.width=h.width;c.height=h.height;
for(var d=c.getContext("2d"),b=h.width/a.getModuleCount(),e=h.height/a.getModuleCount(),f=0;f").css("width",d*a.getModuleCount()+"px")
            .css("height",b*a.getModuleCount()+"px").
            css("border","0px")
            .css("border-collapse","collapse")
            .css("background-color",h.background);

        for(e=0;e").css("height",b+"px").appendTo(c);
            for(i=0;i").css("width",d+"px").css("height",d+"px").css("padding","0px").appendTo(f);
                // 在原来的td中添加div,通过div的上边框来显示颜色。
                r("
").css("border-width",d+"px") .css("border-top",d+"px").css("border-bottom","0px") .css("border-left","0px").css("border-right","0px") .css("border-style","solid") .css("border-top-color",a.isDark(e,i)?"black":"white").appendTo(t); } } } ......
总结

在web项目中,还可以通过在后台生成二维码图片给到前台使用。这样的话就不用考虑以上的兼容问题。

当然我这里仅仅是考虑使用jquery.qrcode.min.js的时候。虽然这个方法有点曲线救国的方式。不过还是决绝的项目中的问题。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/106871.html

相关文章

  • 为博客文章添加维码

    摘要:文章地址为博客的文章添加了一个生成二维码的功能,可以在扫描二维码后在移动端进行阅读,还能分享给朋友或者分享到朋友圈。 文章地址:http://www.xiabingbao.com/blogs/2016/08/31/blogs-qrcode.html 为博客的文章添加了一个生成二维码的功能,可以在扫描二维码后在移动端进行阅读,还能分享给朋友或者分享到朋友圈。只在文章的页面才有生成二维码的...

    王岩威 评论0 收藏0
  • 打印modal框中线生成维码

    摘要:在网上搜了一些方法,做法是获取二维码元素赋值给整个的,然后再调用浏览器的打印功能,缺点是会改变整个页面,需要刷新恢复。但问题还不止于此,由于二维码是在线生成的,获取到的二维码元素没有实际内容,所以这个方法不可行。 二维码由jquery.qrcode.min.js将json字符串转换而成,细节不再赘述,效果如图:showImg(https://segmentfault.com/img/b...

    elva 评论0 收藏0
  • 30分钟做一个维码名片应用,有源码!

    摘要:前言分钟带你用做一个微信公众号上使用的二维码名片,相应技术点有详细讲解,高清有码点击下载全部源码二维码现在是无处不在,无孔不入了。二维码名片的应用就介绍到这里啦,码字不易,随手点赞哈 前言 30分钟带你用Wex5做一个微信公众号上使用的二维码名片,相应技术点有详细讲解,高清有码!(点击下载全部源码) 二维码现在是无处不在,无孔不入了。大到一辆汽车,小到一包纸巾,身上都印有二维码,明码标...

    littlelightss 评论0 收藏0
  • 写网页时拿起就用小技巧

    摘要:允许以特定的方式去定义匹配某个区域的特定元素。在规定一个框的宽高之外给这个框加内边距和边框。和默认值在规定的一个框的宽高之内给这个框加内边距和边框。 1. box-sizing:允许以特定的方式去定义匹配某个区域的特定元素。 content-box:在规定一个框的宽高之外给这个框加内边距和边框。 border-box:(textarea和select默认值)在规定的一个框的宽高之内给这...

    econi 评论0 收藏0
  • 写网页时拿起就用小技巧

    摘要:允许以特定的方式去定义匹配某个区域的特定元素。在规定一个框的宽高之外给这个框加内边距和边框。和默认值在规定的一个框的宽高之内给这个框加内边距和边框。 1. box-sizing:允许以特定的方式去定义匹配某个区域的特定元素。 content-box:在规定一个框的宽高之外给这个框加内边距和边框。 border-box:(textarea和select默认值)在规定的一个框的宽高之内给这...

    rubyshen 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<