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

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;
    }  
}
赞(60)
未经允许不得转载:大前端 » css print
分享到: 更多 (0)

评论 24

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

    I simply had to say thanks yet again. I do not know the things I would have made to happen in the absence of those ways contributed by you relating to such a theme. It previously was a real terrifying circumstance in my circumstances, but noticing your specialized fashion you processed the issue forced me to jump with gladness. I’m happy for your information and then believe you comprehend what a powerful job that you’re getting into educating some other people through the use of a web site. I know that you have never come across any of us.

  2. #21

    Nice post! Thank you.

  3. #20

    Looks realy great! Thanks for the post.

  4. #19

    Looks realy great! Thanks for the post.

  5. #18

    Looks realy great! Thanks for the post.

  6. #17

    Looks realy great! Thanks for the post.

  7. #16

    I just was in essence really pleased to not mention delighted thinking of that We the sensation from debating while using guide of foreign folks, maybe even picked English tongue for helping many people correct after they recognized ordinarily the chatting worry. I just was in essence even specifically enthusiastic when currency.

    Loren Hardaman2周前 (04-08)回复
  8. #15

    I like it when individuals get together and share views. Great blog, keep it up!

    DMC52周前 (04-06)回复
  9. #14

    You’ve made some decent points there. I looked on the web for more information about the issue and found most people will go along with your views on this site.

    DMC53周前 (04-02)回复
  10. #13

    I dont agree with all of the points made but still a good read cheers.

  11. #12

    Simply desire to say your article is as astounding. The clearness in your post is simply spectacular and i can assume you are an expert on this subject. Well with your permission let me to grab your feed to keep updated with forthcoming post. Thanks a million and please keep up the gratifying work.

    Hosea Haymer1个月前 (03-11)回复
  12. #11

    xppbbb

    dawang5个月前 (11-30)回复
  13. #10

    是范德萨发

    的撒2年前 (2017-08-20)回复
  14. #9

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

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

    daanjia.com lanvbo.com

    6342年前 (2017-07-17)回复
  16. #7

    深圳前端技术高级群622293272

    jjgaga2年前 (2017-06-27)回复
  17. #6

    asd adsa

    asd2年前 (2017-04-25)回复
  18. #5

    这篇文章还不错

    hybnx2年前 (2017-04-20)回复
  19. #4

    这篇文章可以

    hybnx2年前 (2017-04-20)回复
  20. #3

    这篇文章不错

    hybnx2年前 (2017-04-20)回复
  21. #2

    阿诗丹顿

    阿大声道2年前 (2017-03-03)回复
    • ccc

      hybnx2年前 (2017-04-06)回复
      • 阿萨德

        asd2年前 (2017-04-25)回复
  22. #1

    fda

    fda2年前 (2017-03-02)回复

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

立即前往