如何禁止打印页面

所属分类：网络编程 / CSS/HTML 阅读数： 1356

收藏 0赞 0分享

解决思路：
要真正禁止打印页面是办不到的，但是如果能设置让用户打印到的是空白，也算是实现禁止打印的目的了。
具体步骤：
代码示例：

<html>
<head><title>不可打印的页面</title>
<style>
@media print{
body{display:none}
}
</style>
</head>
<body>
文档主要内容
</body>
</head>

注意：@media print{}规则中所定义的CSS仅对打印时的页面生效。
技巧：在很多论坛中在打印帖子时都是用一个专门的页面来实现，如果能熟练运用@media print{}规则，就不用单独做一个打印用的页了。
提示：
@media print{}规则中可以用来代码print的还有all和screen。
类似@media的规则如表2.2.1所示。

规则说明
@import指定导入的外部样式表及目标媒体。该规则必须在样式表头部最先声明
@charset在外部样式表文件内使用。指定该样式表使用的字符集。
@font-face设置嵌入HTML文档的OpenType字体(需IE5+支持)
@media指定样式表规则用于指定的媒体类型(需IE5.5+支持)

特别提示
运行本例代码，然后打印网页，打印结果将不包括"文档主要内容"。

特别说明

本例主要运用了@media规则来定义页面对于打印时应用的样式，print意思是所定义的CSS应用于打印机，类似的print媒体类型还有：
all 应用于所有类型的设备
screen 应用于计算机的显示器

更多精彩内容其他人还在看

如何禁止打印页面

简单明了带你了解CSS Modules

新手学习css优先级

css进阶学习选择符

实现css文字垂直居中的8种方法

完美实现CSS垂直居中的11种方法

webpack高级配置与优化详解

5个HTML5的常用本地存储方式详解与介绍

CSS代码检查工具stylelint的使用方法详解

Zen Coding css,html缩写替换大观快速写出html,css

javascript代码规范小结

网络赚钱

站长故事

如何禁止打印页面

简单明了带你了解CSS Modules

新手学习css优先级

css进阶学习 选择符

实现css文字垂直居中的8种方法

完美实现CSS垂直居中的11种方法

webpack高级配置与优化详解

5个HTML5的常用本地存储方式详解与介绍

CSS代码检查工具stylelint的使用方法详解

Zen Coding css,html缩写替换大观 快速写出html,css

javascript代码规范小结

网络赚钱

站长故事

css进阶学习选择符

Zen Coding css,html缩写替换大观快速写出html,css