css打印分页

一、打印方法:

一般打印web使用的是window.print()方法,当然也可使用vue-print

二、参数介绍:

@page中一般设置打印的页头页脚打印方向等,示例:

size:打印信息,打印纸张类型(A4)亦或控制打印方向,portrait: 纵向打印地, landscape: 横向。

@page{

margin: 4mm 14mm 4mm 4mm;

size:A4 landscape;

}

@media print 设置css中可以查看打印样式,示例:

media print {

}

可以将打印和页面的部分分离,需要注意的是需要打印的部分用“包含css样式再赋予函数,注意不是引号。然后抛出引入展示页面中,放在data的return {}下就行了。

三、分页:

分页的话使用的css样式一般是page-break-before与page-break-after这两个,对应的是打印前分页与打印后分页。

page-break-before 在元素前分页

page-break-after 在元素后分页

page-break-inside 元素内部分页

打印属性可以控制分页方向,可以设定4种设定值:auto、always、left和right。其中Auto是默认值,只有在有需要时,才需设定分页符号,以page-break-after示例:

page-break-after:auto; 默认值

page-break-after:always; 新分页在元素下方

page-break-after:left; 新分页在元素下方

page-break-after:right; 新分页在元素下方

注意:

1.分页的元素必须是个可展示的块级元素,为求保险最好加上display: block;

2.元素内分页我试过,不怎么管用,所有还是用page-break-after比较好,要循环中分页的建议加个判断,然后再设置分页,再添加新的table元素,在该table元素中复制这个循环同样加上判断展示分页后的内容

3.建议分页元素放在两个table元素之间,分页后的table元素设置margin-top,如果不起左右就在元素属性style上设置
————————————————
版权声明:本文为CSDN博主「qq_35491739」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_35491739/article/details/126279510

发表评论

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