关注前端开发
关注用户体验

css print

最近做表单打印,遂整理了一些打印相关的内容。

说到网页打印,首先想到的便是@media查询(即网页css),通过使用媒体类型print即可解决实际应用的大多数问题,比如实现只打印网页的某部分内容,调整字体大小、修改布局等使打印出来的纸质文件更简洁明了。代码如下:

@media print{

    /*隐藏不打印的元素*/
    .no-print{
        display:none;
    }
    /*其他打印样式*/
}

但是,就打印表单来说,仅解决上述问题是不够的,我们无法忍受表单存在打印分页时内容被截断、分页显示顶部没有留白等问题。那么如何解决这些问题呢?这就要使用到css打印样式了,即@page,用来指定页面盒子的各个方面。

eg1:尺寸、页边距设置

@page{
     size: 5.5in 8.5in;       
     margin: 30px;
}

注:这里除了可以用长度值声明尺寸,还可使用纸质尺寸关键字”A4″或“legal”;亦可通过关键字指定页面方向“portrait”、“landscape”,默认为portrait垂直方向。当margin设置不起作用时检查打印机是否边距是否设置了默认以外的值。

eg2:设置第一页、奇数页或偶数页样式(以首页为例)

@page :first { 

    /*首页设置*/

}

注:left、right分别为偶数页、奇数页选择器。

eg3:避免表格断开

@page{
    table{
        page-break-after: avoid;
    }  
}

注:page-break-after对tr、td不起作用所以当以整体出现的时候要在同一个table中。

eg4:避免某行文字断裂

@page{
    table{
        page-break-inside: avoid;
    }  
}
未经允许不得转载:大前端 » css print
分享到:更多 ()

评论 11

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #9

    给你一棒棒,让你一针见血

    我是你大爷2周前 (07-17)回复
  2. #8

    daanjia.com lanvbo.com

    6342周前 (07-17)回复
  3. #7

    深圳前端技术高级群622293272

    jjgaga1个月前 (06-27)回复
  4. #6

    asd adsa

    asd3个月前 (04-25)回复
  5. #5

    这篇文章还不错

    hybnx3个月前 (04-20)回复
  6. #4

    这篇文章可以

    hybnx3个月前 (04-20)回复
  7. #3

    这篇文章不错

    hybnx3个月前 (04-20)回复
  8. #2

    阿诗丹顿

    阿大声道5个月前 (03-03)回复
    • ccc

      hybnx4个月前 (04-06)回复
      • 阿萨德

        asd3个月前 (04-25)回复
  9. #1

    fda

    fda5个月前 (03-02)回复

themebetter 国内更好的WordPress主题服务商

立即前往