JavaScript使用window.print()打印页面:样式设置、精确分页以及局部打印

大部分浏览器提供打印页面的功能,直接使用浏览器的打印功能是直接将整个页面打印出来,并且是自动分页。

很多时候直接打印整个页面并不能满足我们的需要。有三方面的需求我们可能要考虑:

  1. 样式设置:打印的样式和页面显示的样式不同,需要对设置打印样式。
  2. 精确分页:需要根据具体的内容进行精确分页。
  3. 局部打印:不需要打印整个页面,只需要打印页面的部分。

html示例

<!doctype html> <html> <head> <meta charset="utf-8"> <title>打印</title> </head> <body> <div>内容1</div> <div>内容2</div> <input onclick="print()" value="点击打印" type="button"> </body> </html>

样式设置

页面打印默认会应用当前的样式。如果我们需要对打印的样式做定制的设置,可以使用@media print媒体属性。@media print里定义的样式只会应用于打印,不会应用于页面显示。

例如让内容1的字体打印为斜体:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>打印</title>
<style>
@media print{
  .italic {font-style: italic}
}
</style>
</head>
<body>
<div class="italic">内容1</div>
<div>内容2</div>
<input onclick="print()" value="点击打印" type="button">
</body>
</html>

精确分页

默认情况下,调用window.print()会根据页面的内容自动分页。如示例,因为页面的内容少,在一个打印页面就可以容纳,所以是不会分页。

但如果有需求要把"内容1"和“内容2”分为两页打印,那该怎么办呢?

CSS的page-break-after属性可以用来做分页,它的值为:

  • auto:默认。如果必要则在元素后插入分页符。
  • always:在元素后插入分页符。
  • avoid:避免在元素后插入分页符。
  • left:在元素之后足够的分页符,一直到一张空白的左页为止。
  • right:在元素之后足够的分页符,一直到一张空白的右页为止。
  • inherit:规定应该从父元素继承 page-break-after 属性的设置。

auto和always所有浏览器都支持,后面四个值浏览器支持程度不同。

添加page-break-after:always精确分页:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>打印</title>
<style>
@media print{
  .page-break {page-break-after:always;}
}
</style>
</head>
<body>
<div class="page-break">内容1</div>
<div>内容2</div>
<input onclick="print()" value="点击打印" type="button">
</body>
</html>

局部打印

默认情况下,window.print()会把整个页面打印处理。如示例里的按钮“点击打印"也是会被打印出来,显然这是我们不想要的。

有两种方法可以对实现局部打印:

  1. 对不打印的内容隐藏起来
  2. 把打印的内容添加到新的窗口打印

隐藏打印内容

CSS有两个属性可以用来隐藏显示内容:

  • visibility:设置为hidden,内容不显示,但是在内容显示的地方会变成空白。
  • display:设置为none。内容会被隐藏,原来内容所在的元素如同删除一样,不显示空白。

一般情况下,打印页面会使用display:none。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>打印</title>
<style>
@media print{
  .page-break {page-break-after:always;}
  .nonprint{display:none}
}
</style>
</head>
<body>
<div class="page-break">内容1</div>
<div>内容2</div>
<input class="nonprint" onclick="print()" value="点击打印" type="button">
</body>
</html>

在新窗口打印

但要打印的内容少,不打印的内容多且分散,这种情况下隐藏不打印内容就不太好。一般的策略是新建一个窗口,把要打印的内容添加到新的窗口在打印。

需要注意的是:把打印内容添加到新窗口不要把样式添加进去。

示例

printInNewWindow(containerId, style) {
  var html = document.getElementById(containerId).innerHTML;
  var win= window.open('', '打印', 'height=400,width=600'); 

  win.document.write('<html><head><title></title>'); 
  win.document.write('<style>'+style+'</style>'); 
  win.document.write('</head><body >'); 
  win.document.write(html); 
  win.document.write('</body></html>'); 
  win.document.close();  // IE >= 10 不能少
  win.focus();           // IE >= 10
  win.print(); 
  win.close(); 
}

当然,样式也可以使用css文件。在新窗口打开需要加载css文件,在调用打印前最好调用setTimeout()做下延时。

示例

printInNewWindow(containerId, cssLinks) {
  var html = document.getElementById(containerId).innerHTML;
  var win= window.open('', '打印', 'height=400,width=600'); 

  win.document.write('<html><head><title></title>');
  if(cssLinks && cssLinks.length > 0) {
    cssFiles.forEach((cssLink) => {
      win.document.write('<link rel="stylesheet" href="'+ cssLink +'" type="text/css" />');
    });
  } 
  win.document.write('</head><body >'); 
  win.document.write(html); 
  win.document.write('</body></html>'); 
  win.document.close();  // IE >= 10 不能少
  win.focus();           // IE >= 10
  setTimeout(()=> {     //延时
   win.print(); 
   win.close();
  },500);
}

总结

本文主要介绍了如何解决window.print()打印页面时可能要考虑的三个问题:样式设置、精确分页以及局部打印。除了使用window.print()。jquery也提供了一个用于打印的插件PrintArea

版权声明:著作权归作者所有。

相关推荐

纯JavaScript检测页面是否加载完成(理解JavaScript页面加载事件)

JavaScript与页面加载相关的事件先介绍JavaScript与页面加载相关的几个事件:document.readystatechangereadystatechage事件会监控document.readyState。readyState有三个值:loading:文档正在加载interactive:文档已加载完成且已被解析,但子资源(如image,css,iframe等)仍在加载。comple

CSS设置placeholder字体样式

CSS标准里是没有直接对placeholder设置样式的选择器,这里主要是通过各个浏览器的兼容前缀来给输入框的placeholder设置字体样式。/* WebKit browsers*/  input::-webkit-input-placeholder {    color:#999;     font-s

PC端禁止页面缩放(原生JavaScript)

在PC端缩放浏览器的页面主要有三种方式:Ctrl + (+/-)组合Ctrl + 鼠标轮滑浏览器菜单我们是禁止不了用户通过浏览器缩放页面,只能通过对有键盘或鼠标事件的快捷方式做监控,从而实现禁止缩放的快捷方式。禁止Ctrl + (+/-)组合document.addEventListener('keydown', functio

理解JavaScript普通函数以及箭头函数里使用的this

this普通函数的this普通函数的this是由动态作用域决定,它总指向于它的直接调用者。具体可以分为以下四项:this总是指向它的直接调用者, 例如 obj.func() ,那么func()里的this指的是obj。在默认情况(非严格模式,未使用 'use strict'),如果函数没有直接调用者,this为window在严格模式下,如果函数没有

Java HTTP代理设置以及认证

代理设置java http/https设置代理有两种方式:使用系统属性设置以及使用Proxy设置。使用系统属性设置代理String PROXY_HOST = "127.0.0.1";//代理服务器地址 String PROXY_PORT = "80";//代理服务器端口   //HTTP代理 System.setProperty("http.proxyHost", PROXY_HOST); Sy