知识 分享 互助 懒人建站

    懒人建站专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

    懒人建站提供网页素材下载、网站模板
    知识 分享 互助!

    html/css打印样式

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

    显示器(screen)和打印机(printer)是两种差别很大的设备,所以从浏览器里看到的页面,打印出来也许和你看到的样子有很大的差距,所以要设置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打印样式由懒人建站收集整理,您可以自由传播,请主动带上本文链接

    懒人建站就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。

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

    网站地图 圣淘沙娱乐官网 圣淘沙娱乐官网 百乐坊娱娱乐
    申博手机下载版 申博太阳城下载 太阳城怎么代理 申博138怎么开户
    易博国际娱乐平台 网上购彩的网站登入 利来国际娱乐网站 永利棋牌官网登入
    环球娱乐游戏 伟博娱乐备用网址 凱旋门娱乐场 喜达娱乐官方网站
    永利娱乐信誉如何 环球娱乐游戏 豪博娱乐场 皇城国际官方网站
    718sj.com qk138.com 157cw.com XSB2222.COM 898jbs.com
    451xx.com 133DC.COM 8HBS.COM S618Y.COM 383PT.COM
    988XTD.COM 1117118.COM 444xsb.com 883XTD.COM 199TGP.COM
    66sbsun.com 5555XSB.COM 191tt.com 758sunbet.com 66sbmsc.com