网页打印

显示器(screen)和打印机(printer)是两种差别很大的设备,所以从浏览器里看到的页面,打印出来也许和你看到的样子有很大的差距。 screen一般使用逻辑单位比如px,而打印机则应该使用物理单位比如cm或in。我们常见的A4纸张大小在不同DPI的显示器上显示的大小是不同的。 因此如果要精确的控制打印效果就应该使用printcss，这是跨平台兼容的标准。不推荐使用浏览器插件方式实现打印。

web打印还有一种解决方式是生成pdf格式文件,客户端下载来打印,这也是不错的一种打印方式,因为pdf本身就是一种打印标准,可以做到精确控制。可以使用jsPDF在客户端动态生成pdf,也可以在服务器端使用一些组件生成pdf后传送给客户端。当然首选还是使用print

css来实现打印。

使用link标签就像通常在html页面中引入样式表一样,不过附加一个额外的media属性,如下面这样:

<link rel="stylesheet" href="print.css" media="print"/>
<style type="text/css" media="print"></style>

使用@media规则可以在通用的样式表中,使用@media规则指定样式用于打印,比如这样:

@media print {
    selector{
    ...
    }
}

 

自己指定打印分页CSS

page- break-before和page-break-after CSS属性并不会修改网页在屏幕上的显示，这两个属性是用来控制文件的打印方 式。每个打印属性都可以设定4种设定值：auto、always、left和 right。其中Auto是默认值，只有在有需要时，才需设定分页符 号 (Page breaks)。page-break-before若设定成always，则是在遇到特定的组件时，打印机会重新开始一个新的打印页。