CSS WEB打印分页

最新推荐文章于 2024-01-12 10:21:51 发布

太阳99

最新推荐文章于 2024-01-12 10:21:51 发布

阅读量1k

点赞数

分类专栏： CSS JavaScript 文章标签： css web stylesheet 浏览器 class xhtml

本文链接：https://blog.csdn.net/wxnjob/article/details/7762625

版权

JavaScript 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

CSS

4 篇文章 0 订阅

订阅专栏

需求：
在浏览器中打印当前页面的内容，并实现分页设置等...

思路：
1、window.print();

原理：
1、css里media的使用

这么多的值，并不是每个都可用，因为浏览器厂商并没有全部实现它们。

在IE里面，可用的值有all，print，screen三个。上面的代码里，我们没有使用“media”，实际上IE或其他浏览器是用了“all”这个值。“screen”，用于显示器，也就是我们一般看到的效果。“print”，用于打印的效果。

也就是说，我们没有指定“media”，那么我们看到的效果和打印的效果，它们用的都是同样的css文件。如果我们指定了一个“screen”，又指定了一个“print”，那么在打印时就会用“print”指定的css来渲染网页并打印。例如一个网页里有如下代码：
1.<link rel="stylesheet" type="text/css" media="screen" href="mycss.css">
2. <link rel="stylesheet" type="text/css" media="print" href="myprintcss.css">

那就表示，我们通过IE看到的网页，用到的css文件是mycss.css，而通过IE打印时用到的css文件则是myprintcss.css。想到什么了吗？对，我们可以通过print的设置，来让网页上的一些不需要打印的内容隐藏起来，比如，打印按钮。

实际上，media还可以这样使用：
1.<style media=print>
2.//这里定义你要打印时用到的css类
3. </style>

或者这样使用：
1.<style>
2.@media print {
3.//这里定义你要打印时用到的css类
4.}
5. </style>

2、css里用于打印的属性

auto : 假如需要在对象之后插入页分割符
always :始终在对象之后插入页分割符
avoid : 避免在对象后面插入页分割符
left : 在对象后面插入页分割符直到它到达一个空白的左页边
right :在对象后面插入页分割符直到它到达一个空白的右页边
null : 空值。IE5用来取消页分割符设置

这个page-break-after，主要用来在打印时插入一个分页符，分页就靠它了。它还有个双胞胎的兄弟，叫page-break-before，参数和它一样，看名字即知道它是用来在对象之前插入分页符。

例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>WEB打印分页</title>
<style type="text/css">
.pagebreak
{
page-break-after:always;
}
</style>
<script type="text/javascript">
function funcPrint()
{
window.print();
}
</script>
</head>

<body>
<div>这是第一页的内容</div>

<div class="pagebreak"></div>

<div>这是第二页的内容</div>
<div class="pagebreak"></div>

<div>这是第三页的内容</div>
<div class="pagebreak"></div>

太阳99

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS WEB打印分页

需求：在浏览器中打印当前页面的内容，并实现分页设置等...思路：1、window.print();原理：1、css里media的使用实际上，上面的link对象里，我们是省略了一个叫“media”的属性，这个属性指定样式表规则用于指定的设备类型。它有如下值可用：all-- 用于所有设备类型 aural-- 用于语音和音乐合成器 braille-- 用于触
复制链接

扫一扫