雅加达赌场|开心8赌球|真人推饼|真人扑克专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

    雅加达赌场|开心8赌球|真人推饼|真人扑克提供网页素材下载、网站模板
    知识 分享 互助!

    html/css打印样式

    作者:佳明妈 来源:web前端开发 2016-10-02 人气:
    显示器(screen)和打印机(printer)是两种差别很大的设备,所以要设置html/css打印样式。 screen一般使用逻辑单位比如px,而打印机则应该使用物理单位比如cm或in。我们常见的A4纸张大小在不同DPI的显示

    本文地址:http://www.ledoupay.com/html+css/htmlcssjq/print_css.html
    文章摘要:html/css打印样式 ,三期格萨尔众人拾柴,过境制宪蓝图网。

    显示器(screen)和打印机(printer)是两种差别很大的设备,所以从浏览器里看到的页面,雅加达赌场|开心8赌球|真人推饼|真人扑克:打印出来也许和你看到的样子有很大的差距,所以要设置html/css打印样式,
    screen一般使用逻辑单位比如px,而打印机则应该使用物理单位比如cm或in。我们常见的A4纸张大小在不同DPI的显示器上显示的大小是不同的。
    因此如果要精确的控制打印效果就应该使用print css,这是跨平台兼容的标准。不推荐使用浏览器插件方式实现打印。
    web打印还有一种解决方式是生成pdf格式文件,客户端下载来打印,这也是不错的一种打印方式,因为pdf本身就是一种打印标准,可以做到精确控制。
    可以使用jsPDF在客户端动态生成pdf,也可以在服务器端使用一些组件生成pdf后传送给客户端。

    当然首选还是使用print  css来实现打印。

    怎么引入css打印样式print css?

    • 使用link标签就像通常在html页面中引入样式表一样,不过附加一个额外的media属性,如下面这样:
    <link rel="stylesheet" href="print.css" media="print" />

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

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

    或者

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

    css文件中:

    @import url(print-style.css) print;

    html文件中:

    <style type="text/css">
    @import url(print-style.css) print;
    </style>

    使用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 规则用于指定打印页面的一些属性,包括纸张尺寸,方向,页边距,分页等特性。其语法如下:

    @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 属性的设置。

    比如:

    @media print {
      section {page-break-before: always;}
      h1 {page-break-after: always;}
      p {page-break-inside: avoid;}
    }
    • orphans设置当元素内部发生分页时必须在页面底部保留的最少行数。
    • widows设置当元素内部发生分页时必须在页面顶部保留的最少行数。比如:
    @media print {
      p {orphans:3; widows:2;}
    }

    css打印样式其他说明

    1. 对于页面上有显示而不想打印的内容,可以将其display设置为none来避免打印。
    2. 需要打印的内容尽量避免float,有些浏览器不会正确的打印浮动的内容。
    3. 可以调用window.print()函数来打印当前页面。
    4. 分页打印或换页打印: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属性会将分页符号加在指定组件后,而非之前。在下列程序中您将可以看到这些属性的设定。
    ↓ 查看全文

    html/css打印样式由雅加达赌场|开心8赌球|真人推饼|真人扑克收集整理,您可以自由传播,请主动带上本文链接

    雅加达赌场|开心8赌球|真人推饼|真人扑克就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。

    html/css打印样式-最新评论