css打印适应纸张_CSS print 样式 css控制打印样式 分页 页面大小
显示器(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 代码:
@import url(print-style.css) print;
@import url(print-style.css) print;
使用link标签要比使用@import规则性能更好。
度量单位
显示时一般使用px,em或pt等逻辑单位,但在打印时要使用物理单位,比如cm或in(英寸)。对于常见的DPI(Dot Per Inch)为96的screen,px与cm的换算关系如下:
1 inch = 2.54 cm
1cm = 96/2.54 ≈ 37.80 px
1px = 2.54/96 ≈ 0.0265 cm
100px = 2.65 cm
A4纸的标准尺寸为:
21.0cm * 29.7 cm
在96DPI分辨率下,其对应的像素尺寸大约为:
794px * 1123px
因为不同的DPI下,其对应的像素尺寸是不同的,所以才要使用print css,使用物理单位来描述要打印的页面,这样打印效果就会一致了。
@page规则(at-rule)
@page 规则用于指定打印页面的一些属性,包括纸张尺寸,方向,页边距,分页等特性。其语法如下:
css 代码:
@page :pseudo-class {
size: A4 landscape;
margin:2cm;
}
其中伪类可以指定:
page-break-before用于设置元素前面的分页行为,可取值:
auto默认值。如果必要则在元素前插入分页符。
always在元素前插入分页符。
avoid避免在元素前插入分页符。
left在元素之前足够的分页符,一直到一张空白的左页为止。
right在元素之前足够的分页符,一直到一张空白的右页为止。
inherit规定应该从父元素继承 page-break-before 属性的设置。
page-break-after设置元素后的分页行为。取值与page-break-before一样。
page-break-inside设置元素内部的分页行为。取值如下:
auto默认。如果必要则在元素内部插入分页符。
avoid避免在元素内部插入分页符。
inherit规定应该从父元素继承 page-break-inside 属性的设置。
比如:
css 代码:
h1 {page-break-after: always;}}
orphans设置当元素内部发生分页时必须在页面底部保留的最少行数。
@media print {
section {page-break-before: always;}
h1 {page-break-after: always;}
p {page-break-inside: avoid;}
}
widows设置当元素内部发生分页时必须在页面顶部保留的最少行数。比如:
css 代码:
@media print {
p {orphans:3; widows:2;}
}
其他
对于页面上有显示而不想打印的内容,可以将其display设置为none来避免打印。
需要打印的内容尽量避免float,有些浏览器不会正确的打印浮动的内容。
可以调用window.print()函数来打印当前页面。
分页打印或换页打印:page- break-before和page-break-after CSS属性并不会修改网页在屏幕上的显示,这两个属性是用来控制文件的打印方式。每个打印属性都可以设定4种设定值:auto、always、left和 right。其中Auto是默认值,只有在有需要时,才需设定分页符号 (Page breaks)。page-break-before若设定成always,则是在遇到特定的组件时,打印机会重新开始一个新的打印页。page- break-before若设定成left,则会插入分页符号,直到指定的组件出现在一个左边的空白页上。page-break-before若设定成 right,则会插入分页符号,直到指定的组件出现在一个右边的空白页上。page-break-after属性会将分页符号加在指定组件后,而非之前。在下列程序中您将可以看到这些属性的设定。
css打印适应纸张_CSS print 样式 css控制打印样式 分页 页面大小相关推荐
- css打印适应纸张_css控制打印样式
显示器(screen)和打印机(printer)是两种差别很大的设备,所以从浏览器里看到的页面,打印出来也许和你看到的样子有很大的差距.screen一般使用逻辑单位比如px,而打印机则应该使用物理单位 ...
- css打印适应纸张_使用原生css+js+html实现打印A4纸张的功能页面
有时候我们需要使用html+css实现打印A4纸张的功能页面,以下代码实现 A4打印页面 /*横向*/ .a4-endwise{ margin: 0 auto; width: 1070px; heig ...
- css字体倾斜角度_css怎么设置倾斜的字体样式?(代码详解)
css怎么设置倾斜的字体样式?本篇文章就给大家介绍用css设置倾斜字体样式的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 首先我们要知道在css中设置对象内字体倾斜常常是使用 ...
- css字体倾斜角度_css如何设置字体为倾斜样式?
css如何设置字体为倾斜样式?下面本篇文章就来给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在CSS中,可以通过设置font-style属性的值为italic(斜体 ...
- 美丽的表格样式(使用CSS样式表控制表格样式)
按照WEB2.0风格,设计了几个表格样式,希望大家喜欢. WEB2.0提倡使用div开布局,但不是要全然放弃使用表格,表格在数据展现方面还是不错的选择. 如今使用介绍使用CSS样式表来控制.美化表格的 ...
- 漂亮的表格样式(使用CSS样式表控制表格样式)
依照WEB2.0风格,设计了几个表格样式,希望大家喜欢. WEB2.0提倡使用div开布局,但不是要完全放弃使用表格,表格在数据展现方面还是不错的选择. 现在使用介绍使用CSS样式表来控制.美化表格的 ...
- CSS实例(一):漂亮的表格样式(使用CSS样式表控制表格样式)
依照WEB2.0风格,设计了几个表格样式,希望大家喜欢. WEB2.0提倡使用div开布局,但不是要完全放弃使用表格,表格在数据展现方面还是不错的选择. 现在使用介绍使用CSS样式表来控制.美化表格的 ...
- css图片精灵定位_CSS精灵图片(CSS sprite)使用心得(转)
引言: 提高网页显示速度最有效的一个方法是减少页面的HTTP请求次数,为了减少HTTP请求次数,最直接有效的方法是使用精灵图片(CSS sprites),精灵图片是把许多图片放到一张大图片里面,通过C ...
- css图片精灵定位_CSS精灵图片(CSS sprite)使用心得
有 引言: 提高网页显示速度最有效的一个方法是减少页面的HTTP请求次数,为了减少HTTP请求次数,最直接有效的方法是使用精灵图片(CSS sprites),精灵图片是把许多图片放到一张大图片里面,通 ...
最新文章
- python html解析查找字符串_用python的BeautifulSoup分析html
- linux 由一个文件夹复制到另外一个文件夹
- python数字类型-Python基础:数据类型-数字(5)
- python数字处理技巧(2): Numpy、矩阵运算、随机、字符串日期
- 开源docker轻量级管理平台shipyard部署(中文版)
- OpenFOAM边界类型(终极详细介绍)
- 13 个超炫的 Conky 配置
- 在VI中删除行尾的换行符
- Contours 等高线图
- cxgrid 行合并单元格_Excel合并单元格无法筛选和排序,你必须掌握这3个小技巧...
- pgz-sbv-gf极狐低代码平台发布
- 不用花钱,免费查看CAD图纸的好用看图软件
- 天正CAD启动时显示服务器名称为空,如何解决天正建筑2014启动时出现error
- WebView 截取长图
- Unrecognized field ResultCode (class com.xiaocaimi.loan.pojo.vo.LiuLiuYuResponse), not marked as i
- Wireshark使用指南
- 关于100层楼,扔两个鸡蛋,求摔碎鸡蛋的临界层的问题
- [笔记] 关于通过鼠标滚轮设置缩放的技巧
- 企业固定资产标签粘贴规范
- 前端面试题总结(转载)