最近项目中遇到了打印的需求,因为平常较少会遇到这方面,因此把此次学到的内容记录下。

print.js

window.print()方法可以打印当前的页面,但是现实中我们打印的可能只是一个元素,例如页面上的table,或者一篇文章,但是js并没有提供打印某个元素的方法。

在网上我们会发现有很多可以实现这种打印一个元素的插件,我们看看内部实现原理:

我们可以看到,它的原理其实是新建一个iframe,然后将需要打印元素的html放进去,同时加入页面上的style和link(保持样式一致)。然后让这个iframe去执行print方法。不得不说这个方法确实很巧妙啊。

知道print.js只是一小步,有些时候还需要css的辅佐,看下面这个demo:

点击demo中的打印按钮,我们可以看到只打印了两个表格,基本符合我们的预期,但是有一些小问题:

首先打印页面上出现了页眉,页脚,这些在真实打印中都会出现(亲自打印过),需要去掉;然后表格中的输入框也显示出来的,这明显很丑,希望去掉框;最后希望打两张纸,每张纸上一个表(目前是一张纸上两个表)。

我们先来看看最终修改好的demo,下文会详细讲解用到的主要css:

@page

想去掉页眉,页脚,需要用到@page,代码如下:

网上有很多代码设置margin:0mm;那样确实可以实现,但是那样内容就会贴着两边了,其实只要设置margin-top和margin-bottom为0就可以,左右可以设置一些留白。

上面的size:auto是默认的设置,我们也可以设置size:A4 landscape;这样就表示横向打印,可选设置:(['A4','legal'],['portrait','landscape'])。

@page还有几个伪类,如下:

其中@page:right和@page:left比较有意思,代表奇数页和偶数页,因为打印出来的内容印刷出来的话,第一张通常在右边,第二张可以理解为第一张的反面,类似翻书,它是在左边的,因此有这个:left和:right。

我们可以看下一个应用@page:left的demo:

我们可以看到偶数页面的内容和左边有一个margin,这个就是在@page:left中设置的margin-left。

page-break-after:always

在一个元素的css上添加page-break-after:always后,在打印的时候就会在元素后方插入一个分页符,后面的内容就另起一页了。(page-break-after:left和right意思插入一个或两个分页符,让内容显示在奇数/偶数页上,但实际测试无效)。

与之对应的还有一个page-break-before:always,表示在元素之前加入分页符。

page-break-inline:aviod;可以保证一个元素在分页的时候不会被截断,下面看个例子:

上面左图是段落被截断的情况,右边设置了page-break-inline:aviod;可以保证段落不被截断。

这个在对table上用处比较大,因为一个表格被截断是很难看的:

上面左图是table被截断的情况,右边设置了page-break-inline:aviod;table没有被截断。

@media print

这是一个关于打印的媒体查询,最开始的demo中,input元素被打印出来,显示出了边框,最终是如何去掉input但是又显示出内容的呢?

其实input后面有一个div,它的内容和input内容一样,正常情况,它不显示,但是在打印模式下(@media print{})的时候,我们将它显示出来,同时隐藏input。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字