用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…

用css打印html相关推荐

怎么把css改成打印,css 打印print
css打印的基本设置打印页面的一些属性,包括纸张尺寸,方向,页边距,分页,页眉,页脚,水印等等特性,大多数可以通过@page的规则来设置. 度量单位显示时一般使用px,em或pt等逻辑单位,但在打 ...
转 CSS 打印：http://eblog.nenu.edu.cn/user1/easter/archives/2008/1864.html
转 CSS 打印:http://eblog.nenu.edu.cn/user1/easter/archives/2008/1864.html
用css规范php的输出,一段很小但很实用的CSS打印类(附例子及_php
Untitled Document .tdp http://www.gaodaima.com/45586.html一段很小但很实用的css打印类(附例子及_php { border-bottom: 1 ...
html打印在一页面布局,html – CSS打印布局 – 单页打印
我被卡住了,SO档案没有帮助我.也许我在错误的地方看.这是一个简短的故事: >我有一个看法,我需要打印在一个完整的页面.我不能有第二页,我需要它在页面上尽可能大. >解决方案必须具有合理的 ...
css 隐藏元素显示元素_使用CSS打印时如何隐藏元素？
css 隐藏元素显示元素 Introduction: 介绍: We have come across many challenges while developing a website or we ...
html打印预览出现重叠,html – 使用打印模式css打印网页时页眉和正文内容重叠...
我必须在每个页面打印带有自定义标题的网页, 下面是我的打印媒体CSS代码 @media screen { header.onlyprint, footer.onlyprint,.watermark{ ...
css打印适应纸张_使用原生css+js+html实现打印A4纸张的功能页面
有时候我们需要使用html+css实现打印A4纸张的功能页面,以下代码实现 A4打印页面 /*横向*/ .a4-endwise{ margin: 0 auto; width: 1070px; heig ...
css打印适应纸张_CSS print 样式 css控制打印样式分页页面大小
显示器(screen)和打印机(printer)是两种差别很大的设备,所以从浏览器里看到的页面,打印出来也许和你看到的样子有很大的差距.screen一般使用逻辑单位比如px,而打印机则应该使用物理单位 ...
css打印适应纸张_css控制打印样式
显示器(screen)和打印机(printer)是两种差别很大的设备,所以从浏览器里看到的页面,打印出来也许和你看到的样子有很大的差距.screen一般使用逻辑单位比如px,而打印机则应该使用物理单位 ...

用css打印html

需求背景

解决办法

使用方法

其它

参考

用css打印html相关推荐

最新文章

热门文章