資訊專欄INFORMATION COLUMN
摘要：在上不支持，則通過的方式渲染也可以將二維碼在頁面上顯示。這樣的話就不用考慮以上的兼容問題。不過還是決絕的項目中的問題。
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，使用div的border-top上邊框設置為長和寬相等形成二維碼的每一個小點,其余的border-left，border-right，border-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的時候。雖然這個方法有點曲線救國的方式。不過還是決絕的項目中的問題。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106871.html
摘要：文章地址為博客的文章添加了一個生成二維碼的功能，可以在掃描二維碼后在移動端進行閱讀，還能分享給朋友或者分享到朋友圈。 文章地址：http://www.xiabingbao.com/blogs/2016/08/31/blogs-qrcode.html 為博客的文章添加了一個生成二維碼的功能，可以在掃描二維碼后在移動端進行閱讀，還能分享給朋友或者分享到朋友圈。只在文章的頁面才有生成二維碼的...
摘要：在網上搜了一些方法，做法是獲取二維碼元素賦值給整個的，然后再調用瀏覽器的打印功能，缺點是會改變整個頁面，需要刷新恢復。但問題還不止于此，由于二維碼是在線生成的，獲取到的二維碼元素沒有實際內容，所以這個方法不可行。 二維碼由jquery.qrcode.min.js將json字符串轉換而成，細節不再贅述，效果如圖：showImg(https://segmentfault.com/img/b...
摘要：允許以特定的方式去定義匹配某個區域的特定元素。在規定一個框的寬高之外給這個框加內邊距和邊框。和默認值在規定的一個框的寬高之內給這個框加內邊距和邊框。 1. box-sizing：允許以特定的方式去定義匹配某個區域的特定元素。 content-box：在規定一個框的寬高之外給這個框加內邊距和邊框。 border-box：（textarea和select默認值）在規定的一個框的寬高之內給這...
摘要：允許以特定的方式去定義匹配某個區域的特定元素。在規定一個框的寬高之外給這個框加內邊距和邊框。和默認值在規定的一個框的寬高之內給這個框加內邊距和邊框。 1. box-sizing：允許以特定的方式去定義匹配某個區域的特定元素。 content-box：在規定一個框的寬高之外給這個框加內邊距和邊框。 border-box：（textarea和select默認值）在規定的一個框的寬高之內給這...
閱讀 688·2021-11-18 10:07
閱讀 2878·2021-09-22 16:04
閱讀 873·2021-08-16 10:50
閱讀 3326·2019-08-30 15:56
閱讀 1784·2019-08-29 13:22
閱讀 2647·2019-08-26 17:15
閱讀 1229·2019-08-26 10:57
閱讀 1103·2019-08-23 15:23
