多時候,你想給一個按鈕,在網頁上通過一個實際的打印機打印出網頁的內容。
JavaScript可使用window對象的print函數就可以實現這樣的功能。
當執行JavaScript的print函數window.print()將會打印當前頁面。可以使用onclick事件如下直接調用此函數:
<head>
<script type="text/javascript">
<!--
//-->
</script>
</head>
<body>
<form>
<input type="button" value="Print" onclick="window.print()" />
</form>
</body>1234567891011復制代碼類型:[javascript]
這將產生以下按鈕,打印此頁。
這符合打印出來的頁面,但這個不是一個推薦的方式。打印機友好的頁面實際上只是一個文本,沒有圖像,圖形或廣告頁面。
可以使用以下頁式打印機友好方式:
使頁面的副本,并離開了不需要的文本和圖形,然后從原始鏈接到該打印機友好的頁面。
如果你不想讓頁面的額外副本,那么可以使用像適當的注釋標記打印文本 <!-- PRINT STARTS HERE -->..... <!-- PRINT ENDS HERE --> 然后你可以使用PERL或其他腳本在后臺清除打印文本和顯示進行最后的打印。網站使用同樣的方法給打印設備對我們網站的訪客。
如果沒有人在提供上述設備,那么你可以使用瀏覽器的標準工具欄讓網頁打印出來。按照鏈接如下:
File --> Print --> Click OK button.
開課吧廣場-人才學習交流平臺
龍網-新重慶3月4日19時30分訊(記者 姜念月)今(4)日,重慶市教育考試院公布了2022年高職分類考試專業技能測試(其他類除外)準考證打印及考點網址。重慶教育考試院提醒,請各考生自行打印、妥善保管。并請各位考生及時登錄各考點網址,認真仔細閱讀、熟知應考須知,按照防疫要求做好自身防疫工作,沉著、誠信、安全參加測試。
具體安排如下:
準考證打印時間:2022年3月7日起至測試前
考點網址如下:
重慶電子工程職業學院
https://ks.cqcet.edu.cn/
重慶城市管理職業學院
http://www.cswu.cn/zzsgz/list.htm
重慶第二師范學院
http://www.cque.edu.cn/jjy/
重慶工程職業技術學院
http://sac2.cqvie.edu.cn/dkdz/bm_print.asp
重慶工業職業技術學院
http://183.230.255.84:12302/examsstu
重慶三峽職業學院
http://www.cqsxedu.com/flzs/index.htm
重慶醫藥高等專科學校
http://183.230.33.66:8081/login.php
重慶三峽醫藥高等專科學校
https://www.sxyyc.net/html/22/dkgzjnks/
(本文來自新重慶客戶端APP,請至各大應用市場下載)
.首先引入js插件
<!--第一個生成二維碼,2,3分別2種打印插件-->
<script type="text/javascript" src="/Liems/plugins/aweto/jquery.qrcode.min.js"></script>
<script type="text/javascript" src="/Liems/plugins/aweto/jquery.jqprint-0.3.js">
</script><script src="/Liems/plugins/aweto/jquery.PrintArea.js"></script>
2.然后再html中添加二維碼顯示的位置
<div id="wai" >
<div id="qrcode"></div>
<!--startprint-->
<div id="daying"><img src="" id="image" style="display: none;"/></div>
<!--endprint-->
<button id="bu" class='i-form-button' onclick="stamp()" style="display: none;">打印二維碼</button>
</div>
3.然后在js中寫入生成二維碼的方法
jQuery(function(){
//獲取身份證號碼
var idCard = $('#EOEMPMST__0__EEM_SFZ_COD').val();
var jsons=idCard+"|1";
var zhi=utf16to8(jsons);
//判斷是否新建
if(idCard != null && idCard != ''){
jQuery('#qrcode').qrcode({
render : "canvas",
width : 150,
height : 150,
text : zhi
});
//保存為圖片
$("canvas").attr("id","erw");
var canvas = document.getElementById('erw');
var context = canvas.getContext('2d');
var image = new Image();
var strDataURI =canvas.toDataURL("image/png");
document.getElementById('image').src = strDataURI;
document.getElementById('bu').setAttribute('style', 'display: block');
}
})
4.qrcode對中文支持不太好,,所以需要轉碼
//轉碼
function utf16to8(str) {
var out, i, len, c;
out = "";
len = str.length;
for(i = 0; i < len; i++) {
c = str.charCodeAt(i);
if ((c >= 0x0001) && (c <= 0x007F)) {
out += str.charAt(i);
} else if (c > 0x07FF) {
out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
} else {
out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
}
}
return out;
}
5.最后進行局部打印
//局部打印
function stamp(){
var bdhtml=window.document.body.innerHTML;//獲取當前頁的html代碼
var odd=bdhtml;
var sprnstr="<!--startprint-->";//設置打印開始區域
var eprnstr="<!--endprint-->";//設置打印結束區域
var prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+17); //從開始代碼向后取html
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//從結束代碼向前取html
window.document.body.innerHTML=prnhtml;
window.print();
//第二種打印jQuery('#wai').PrintArea();
//還原原網頁
window.document.body.innerHTML=odd;
document.getElementById('bu').setAttribute('style', 'display: none');
document.getElementById('image').src="";
window.location.reload();
}
方法中有業務處理,,忽略即可。大體思路如上,歡迎討論
*請認真填寫需求信息,我們會在24小時內與您取得聯系。