首页 > html_css > 正文

css print-大前端
2017-08-29 10:12:32   来源:   评论:0 点击:

<script type="text javascript">var cpro_id="u2273667";(window["cproStyleApi"] = window["cproStyleApi"] || {})[cpro_id]={at:"
<script type="text/javascript">var cpro_id="u2273667";(window["cproStyleApi"] = window["cproStyleApi"] || {})[cpro_id]={at:"3",rsi0:"778",rsi1:"125",pat:"6",tn:"baiduCustNativeAD",rss1:"#FFFFFF",conBW:"0",adp:"1",ptt:"0",titFF:"%E5%BE%AE%E8%BD%AF%E9%9B%85%E9%BB%91",titFS:"14",rss2:"#555555",titSU:"0",ptbg:"90",piw:"0",pih:"0",ptp:"0"}</script><script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></script>

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

说到网页打印,首先想到的便是@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负边距之详解-大前端
下一篇:分享一个生成二维码的插件–QRCode.js-大前端

分享到: 收藏
评论排行