成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

解決jquery.qrcode.min.js在IE6-IE8生成的二維碼，打印不顯示的問題

yimo / 1304人閱讀

摘要：在上不支持，則通過的方式渲染也可以將二維碼在頁面上顯示。這樣的話就不用考慮以上的兼容問題。不過還是決絕的項(xiàng)目中的問題。

jquery.qrcode.min.js 兼容 IE6

使用方式





// 渲染二維碼
$(function() {
    var url = window.location.href;
    $("#qrcode").qrcode({
        render: "table", // 渲染方式有table方式和canvas方式
        width: 150,   //默認(rèn)寬度
        height: 150, //默認(rèn)高度
        text: url, //二維碼內(nèi)容
        typeNumber: -1,   //計(jì)算模式一般默認(rèn)為-1
        correctLevel: 2, //二維碼糾錯級別
        background: "#ffffff",  //背景顏色
        foreground: "#000000"  //二維碼顏色
    });
})
問題描述

通過 jquery.qrcode.min.js 在前端生成二維碼，并且調(diào)用 window.print(); 需要將二維碼打印出來，那么問題來了。

渲染方式有table方式和canvas方式, 使用canvas必須在支持canvas的瀏覽器才能使用，比如：火狐，谷歌，IE9+ 以及其它支持canvas的瀏覽器中使用。

在IE6上（不支持canvas），則通過table的方式渲染也可以將二維碼在頁面上顯示。但是通過 window.print();二維碼顯示不出來，table方式渲染就是通過往td中填充background-color來顯示每個點(diǎn)的。由于瀏覽器在調(diào)用打印方法的時候會忽略調(diào)背景顏色。

解決思路

為確保IE6上也能夠正常使用，可以在原有的td中添加div，使用div的border-top上邊框設(shè)置為長和寬相等形成二維碼的每一個小點(diǎn),其余的border-left，border-right，border-bottom都設(shè)為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);
            }
        }
    }
......
總結(jié)

在web項(xiàng)目中，還可以通過在后臺生成二維碼圖片給到前臺使用。這樣的話就不用考慮以上的兼容問題。

當(dāng)然我這里僅僅是考慮使用jquery.qrcode.min.js的時候。雖然這個方法有點(diǎn)曲線救國的方式。不過還是決絕的項(xiàng)目中的問題。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/106871.html

相關(guān)文章

  • 為博客的文章添加二維碼

    摘要：文章地址為博客的文章添加了一個生成二維碼的功能，可以在掃描二維碼后在移動端進(jìn)行閱讀，還能分享給朋友或者分享到朋友圈。 文章地址：http://www.xiabingbao.com/blogs/2016/08/31/blogs-qrcode.html 為博客的文章添加了一個生成二維碼的功能，可以在掃描二維碼后在移動端進(jìn)行閱讀，還能分享給朋友或者分享到朋友圈。只在文章的頁面才有生成二維碼的...

    王巖威 評論0 收藏0

  • 打印modal框中在線生成的二維碼

    摘要：在網(wǎng)上搜了一些方法，做法是獲取二維碼元素賦值給整個的，然后再調(diào)用瀏覽器的打印功能，缺點(diǎn)是會改變整個頁面，需要刷新恢復(fù)。但問題還不止于此，由于二維碼是在線生成的，獲取到的二維碼元素沒有實(shí)際內(nèi)容，所以這個方法不可行。 二維碼由jquery.qrcode.min.js將json字符串轉(zhuǎn)換而成，細(xì)節(jié)不再贅述，效果如圖：showImg(https://segmentfault.com/img/b...

    elva 評論0 收藏0

  • 寫網(wǎng)頁時拿起就用的小技巧

    摘要：允許以特定的方式去定義匹配某個區(qū)域的特定元素。在規(guī)定一個框的寬高之外給這個框加內(nèi)邊距和邊框。和默認(rèn)值在規(guī)定的一個框的寬高之內(nèi)給這個框加內(nèi)邊距和邊框。 1. box-sizing：允許以特定的方式去定義匹配某個區(qū)域的特定元素。 content-box：在規(guī)定一個框的寬高之外給這個框加內(nèi)邊距和邊框。 border-box：（textarea和select默認(rèn)值）在規(guī)定的一個框的寬高之內(nèi)給這...

    econi 評論0 收藏0

  • 寫網(wǎng)頁時拿起就用的小技巧

    摘要：允許以特定的方式去定義匹配某個區(qū)域的特定元素。在規(guī)定一個框的寬高之外給這個框加內(nèi)邊距和邊框。和默認(rèn)值在規(guī)定的一個框的寬高之內(nèi)給這個框加內(nèi)邊距和邊框。 1. box-sizing：允許以特定的方式去定義匹配某個區(qū)域的特定元素。 content-box：在規(guī)定一個框的寬高之外給這個框加內(nèi)邊距和邊框。 border-box：（textarea和select默認(rèn)值）在規(guī)定的一個框的寬高之內(nèi)給這...

    rubyshen 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<