用css打印html

时间 2019-12-08

标签 css 打印 html 栏目 CSS 繁體版

原文原文链接

需求背景

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

利用 paper css 这个样式表，并作一些简单的配置就能够完成此类需求html

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

以A4纸为例。github

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

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

而后在style标签中加入以下这句spa

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

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

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

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

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

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

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