阅读 982

用css打印html

需求背景

最近接到一个需求,就是打印整个html页面,而且要保证打印出的每一张A4纸的内容是规律的,不能出现截断的这种现象出现(前一页的内容跑到后一页去了)。

解决办法

利用 paper css 这个样式表,并做一些简单的配置就可以完成此类需求

paper-css是一个用纯css的方式来完成打印相关任务的库,里面并不包含js逻辑。

使用方法

以A4纸为例。

首先在head标签里引入样式库

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.3.0/paper.css">
复制代码

然后在style标签中加入如下这句

<style>@page { size: A4 }</style>
复制代码

再为body元素添加值为A4的class

<body class="A4">
复制代码

最后再为每一页的包裹元素上,例如div或者section上添加值为“sheet”的class

<section class="sheet">
复制代码

这样编写完之后,每一个class为sheet的section在打印时就是单独的一页。你可以在section里装载任何你需要的标签元素

其它

paper-css不仅提供了A4纸这一种规格,同时还提供了A3,A5,PDF等格式。

参考

github.com/cognitom/pa…

文章分类
前端