本文介绍在使用window.print()进行网页打印时,因页面为弹出层导致字体意外缩小的常见问题。通过设置target="_blank"在新窗口打开打印内容,可有效解决字体大小异常问题。同时提供通过HTML注释标记打印区域的代码示例,实现局部打印功能。
打印字体缩小的问题描述
今天需要实现一个网页打印功能,直接调用window.print()方法。然而,打印出来的结果中字体总是比预期小一号,暂时未找到具体原因。
随后尝试使用IE专用的打印控件,但该方案仅支持IE浏览器,兼容性较差,因此决定继续排查根本原因。
弹出层导致字体缩小的原因与解决
经过分析发现,问题源于待打印页面是一个弹出层(popup layer)。通过设置target="_blank"在新窗口中打开打印内容,即可恢复正常打印效果。
此外,
局部打印功能的代码实现
具体实现代码如下:
function preview()
{
bdhtml=window.document.body.innerHTML;
sprnstr="<!--startprint-->";
eprnstr="<!--endprint-->";
prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+17);
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));
window.document.body.innerHTML=prnhtml;
window.print();
}
</script> 将<!--startprint-->和<!--endprint-->注释标签分别放置在需要打印内容的开头和结尾,即可实现仅打印指定区域的功能,而非整个页面。该方法参考自其他技术博客。