显示器(screen)和打印机(printer)是两种差别很大的设备,所以从浏览器里看到的页面,打印出来也许和你看到的样子有很大的差距。screen一般使用逻辑单位比如px,而打印机则应该使用物理单位比如cm或in。我们常见的A4纸张大小在不同DPI的显示器上显示的大小是不同的。因此如果要精确的控制打印效果就应该使用print
css,这是跨平台兼容的标准。不推荐使用浏览器插件方式实现打印。
web打印还有一种解决方式是生成pdf格式文件,客户端下载来打印,这也是不错的一种打印方式,因为pdf本身就是一种打印标准,可以做到精确控制。可以使用jsPDF在客户端动态生成pdf,也可以在服务器端使用一些组件生成pdf后传送给客户端。当然首选还是使用print
css来实现打印。
引入print css
使用link标签就像通常在html页面中引入样式表一样,不过附加一个额外的media属性,如下面这样:
html 代码:
表明print.css样式表是用于打印的
使用@media规则可以在通用的样式表中,使用@media规则指定样式用于打印,比如这样:
css 代码:
@media print selector {
...
}
或者
css 代码:
@media print {
selector{
...
}
}
使用@import规则使用@import规则在通用的样式表中导入打印样式表,有两种形式,其本质是一样的。
css文件中:
css 代码:
@import url(print-style.css) print;
html文件中:
html