前端教程：JavaScript页面打印

多时候，你想给一个按钮，在网页上通过一个实际的打印机打印出网页的内容。

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]

这将产生以下按钮，打印此页。

这符合打印出来的页面，但这个不是一个推荐的方式。打印机友好的页面实际上只是一个文本，没有图像，图形或广告页面。

可以使用以下页式打印机友好方式：

使页面的副本，并离开了不需要的文本和图形，然后从原始链接到该打印机友好的页面。

如果你不想让页面的额外副本，那么可以使用像适当的注释标记打印文本 .....  然后你可以使用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插件

</script><script src="/Liems/plugins/aweto/jquery.PrintArea.js"></script>

2.然后再html中添加二维码显示的位置

<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="";//设置打印开始区域

var eprnstr="";//设置打印结束区域

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();

}

方法中有业务处理，，忽略即可。大体思路如上，欢迎讨论

在线咨询

上一篇：HTML 2 PDF通用能力的设计与实现
下一篇：html乱码-解决gb2312编码导致乱码问题

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

前端教程：JavaScript页面打印

如何打印页面：

您的项目需求