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;
    }  }

原文发布于微信公众号 - 大数据钻研(bigdata118)

原文发表时间:2017-04-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大前端_Web

移动端Web页面常见问题解决

经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显示网页,这样字会非常小,所以苹果当初就把iPhone 4的960*640...

2432
来自专栏前端说吧

三种方法解决LI和内部Img的上下间距问题

3786
来自专栏从零开始学 Web 前端

从零开始学 Web 之 移动Web(六)响应式布局

1、固定宽度布局:为网页设置一个固定的宽度,通常以px做为长度单位,常见于PC端网页。

1392
来自专栏大数据钻研

HTML 入门笔记 - 初识HTML

基础框架 <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/ht...

4555
来自专栏web编程技术分享

js弹窗小例子

3258
来自专栏青玉伏案

iOS开发之使用Storyboard预览UI在不同屏幕上的运行效果

  在公司做项目一直使用Storyboard,虽然有时会遇到团队合作的Storyboard冲突问题,但是对于Storyboard开发效率之高还是比较划算的。在之...

2158
来自专栏编程微刊

6款 jQuery Lightbox图片查看触控插件

偶然间在网上看到的几个图片预览的插件,挺好用的,顺手整理下来。 1:Zoomify – jQuery缩放效果lightbox插件 地址:http://www...

4924
来自专栏美丽应用

Simple Control:无需Root为设备添加导航栏

1382
来自专栏阿凯的Excel

快捷键-提速版

今天和大家分享的是快捷键提速版!!(什么是提速版,就是可以迅速提高你的工作速度哇!!貌似所有的Excel技巧都可以提高工作速度) 快捷键提速版正式开始 1、...

2753
来自专栏CRPER折腾记

Angular 2 + 折腾记 :(10) 初步了解动画,以及一步一步写个动画效果

ng2.x动画相关的api是并入@angular/core这个核心模块的,在angular4之后开始独立

812

扫码关注云+社区

领取腾讯云代金券