Skip to content

小小前端

明月本无心,行人自回首。

Menu
  • 前端开发
  • 编程技术
  • SQL语句
  • Linux
  • 生活/旅行
  • JSEditor
  • MiniBarCMS
  • About
  • 隐私政策
Menu

使用css设置打印

Posted on 2017年8月17日2017年8月17日 by king2088

我们都知道A4的尺寸是210mm * 297mm,在css中,我们可以直接使用毫米的单位来设置页面的宽高,当然你也可以使用相应的像素进行设置,不过只是通过body或者html来设置宽高的话,可能也会出现问题,而在这里我们需要使用@page来对页面进行定义,@page主要是用于打印的时候定义页面的类型,比如A4,A5,A3等等。下面先来看一下@page的使用方法。
[cc lang=”css”]@page{
size: A4;
margin: 0;
}[/cc]
另外在设置好@page后,我们可能还会需要设置分页,分页很简单,直接使用page-break-before:always;或者page-break-after:always;就可以设置分页,在网页中是不会显示任何效果的,不过你可以通过浏览器的打印功能进行PDF预览来查看分页是否符合你的要求。
不过分页的使用必须的写在@media print中,使用如下:
[cc lang=”css”]@media print{
.page-break{
page-break-before:always;
}
}[/cc]
.page-break是需要分页的class的元素。

必须注意的问题:
1、如果你的页面使用的table布局,那么page-break-before:always;不能写在td和tr中,也就是说,table是不能被分页的,这是所有浏览器都不支持的。
比如你的代码如下:
[cc lang=”html”]

1 2 3 4 5 6 7 8

[/cc]
这样的代码不论你测试多少次,都是无法进行分页的,经过我的测试,在所有的浏览器中都无法实现分页,并且通过打印机打印后,也是无法分页的!
对于table,我们只能对整个table进行分页,比如下面的代码:
[cc lang=”html”]

1 2 3 4 5 6 7 8
1 2 3 4 5 6 7 8

[/cc]
以上两个table就可以实现完美的分页,不过网上有人说使用page-break-inside:avoid;可以实现对td或者tr的分页,不过我没有进行尝试,因此不敢断言是否分页成功。
2、在div中进行分页
除了table之外,在div中就更加方便使用了,只要你想在任何一个div处进行分页,那就直接使用分页代码即可,比如下面的代码:
[cc lang=”html”]

11111111111111
22222222222222
33333333333333

[/cc]
你可以尝试在浏览器中预览打印的pdf效果,这个div肯定会分成3页进行显示。

最终页面的效果应该如下:
[cc lang=”html”]

11111111111111
22222222222222
33333333333333
1 2 3 4 5 6 7 8
9 10 11 12 13 14 15 16 17

[/cc]

3 thoughts on “使用css设置打印”

  1. 增达网说道:
    2017年8月19日 上午8:47

    如果上天再给我一次机会,我会对你的博客说,下次还来看你!

    回复
  2. abwhy说道:
    2018年5月31日 下午6:53

    设置了@page{size:A3} 根本没有作用,默认打印的还是A4,请问这是什么原因

    回复
    1. king2088说道:
      2018年6月8日 上午10:21

      请设置一下body的宽高,如果body的宽高已经设置为A3的,那么可以直接使用@page {width: 210mm}等设置为A3纸张的宽高

      回复

发表评论 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注

分类

近期文章

  • cordova-plugin-camera在某些android机型中拍照或选择文件时闪退出错的解决办法 2019年10月24日
  • JavaScript nodeJS base64加密解密url参数 2019年10月15日
  • 利用expressJS编写reset api 2019年4月13日
  • angular4 + http拦截器 2019年3月21日
  • ionic navCtrl.pop如何传递参数给上一个页面 2018年11月16日
  • ionic3搭建开发/测试环境 2018年10月25日
  • ionic2、3双击硬件back按键退出应用 2018年10月24日
  • VMware安装Mac OS High Sierra 10.12及高版本无法全屏 2018年8月24日

近期评论

  • 手表资讯发表在《ReactJS环境搭建》
  • king2088发表在《ionic中使用热更新插件cordova-hot-code-push》
  • 重阳节的诗句发表在《常用的sql语句》
  • 新郎致辞发表在《PHP代码实现WordPress相关文章的几种方法》
  • 霸道总裁发表在《vsftpd 提示 unrecognized service 解决办法》

归档

标签

Ajax Android Angular APP Cordova CSS css3 express html5 ionic Java javascript jQuery Linux loading mac Mac OS mongodb MySQL node nodejs PHP react SQL SSH VirtualBox vue vue-cli win10 WordPress WP REST API 主题 兼容性 前端 备份 插件 数据库 数组 服务器 正则表达式 浏览器 热更新 目录 组件 错误
2023年 3月
一 二 三 四 五 六 日
 12345
6789101112
13141516171819
20212223242526
2728293031  
« 10月    
© 2023 小小前端 | Powered by Superbs Personal Blog theme