css打印适应纸张_css控制打印样式

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

css，这是跨平台兼容的标准。不推荐使用浏览器插件方式实现打印。

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

css来实现打印。

引入print css

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

表明print.css样式表是用于打印的

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

@mediaprintselector{

...

}

或者

@mediaprint{

selector{

...

}

}

使用@import规则使用@import规则在通用的样式表中导入打印样式表,有两种形式,其本质是一样的。

css文件中:

@importurl(print-style.css)print;

html文件中:

@importurl(print-style.css)print;

使用link标签要比使用@import规则性能更好。