如何禁止打印页面

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

<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 应用于计算机的显示器

赞 (0)

相关推荐

  • 如何禁止打印页面

    解决思路:  要真正禁止打印页面是办不到的,但是如果能设置让用户打印到的是空白,也算是实现禁止打印的目的了.  具体步骤:  代码示例: <html>  <head><title>不可打印的页面</title>  <style>  @media print{  body{display:none}  }  </style>  </head>  <body>  文档主要内容  </body>  <

  • js调用iframe实现打印页面内容的方法

    1.程序说明 1) 此程序可以实现选择页面中的区域进行打印,以iframe方式进行打印:2) 与原生态的print() 区别在于,取消打印页面后可以完整保留当前访问页面的内容. 2.代码部分 1) JS 函数: 复制代码 代码如下: function do_print(id_str)//id-str 打印区域的id{var el = document.getElementById(id_str);var iframe = document.createElement('IFRAME');var

  • IOS 禁止缩放页面的实现方法

    IOS 禁止缩放页面的实现方法 在ios10前我们能通过设置meta来禁止用户缩放页面: <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> 在ios10系统中meta设置失效了: 为了提高Safari中网站的辅助功能,即使网站在视口中设置了user-scalable = no,用户也可以

  • js禁止浏览器页面后退功能的实例(推荐)

    实例如下所示: <script> $(function(){ if(window.location.href.indexOf("/login") > -1) { //防止页面后退 history.pushState(null, null, document.URL); window.addEventListener('popstate', function () { history.pushState(null, null, document.URL); }); }

  • javascript 打印页面代码

    复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>javascript打印页面</title> <script type="text/javascript"><!-- function fPrint(){ //隐藏不需要打印的内容. document.getElementById("divOperate

  • vue+element实现打印页面功能

    项目中遇到了要打印页面的功能,我感觉我这个方法不太好,欢迎各位来改善指导 使用print插件  https://github.com/xyl66/vuePlugs_printjs 1.在min.js中引入 2.import Print from '@/plugs/print' 3.Vue.use(Print) // 注册 <template> <section ref="print"> <要打印内容/> <div class="no-

  • 利用jqprint插件打印页面内容的实现方法

    业务场景 客户需要在页面有一个打印按钮,点击之后可以打印Echarts图表的内容以及文字提示信息,经谷歌搜索发现,实现方法大概有三种之多,其他两种不太熟悉,而采用的这种打印方式是一个在jQuery的基本上开发的一个print插件,因此可以使用jQuery的方式查找元素,因此决定采用这种方式. 先看一下实现的效果图,如下: 实现效果图 引入js文件 <script type="text/javascript" src="__JS__/jquery-migrate-1.2.

  • Vue出现弹出层时禁止底部页面跟随滑动

    背景:最近在写一个vue项目,当出现弹出层时,发现底部页面跟随滚动,但是产品不想要这种效果,于是找各种资料,发现很多说法,但是试了试,发现有的根本就不行,比如说有人提出用vue中提供的@touchmove.prevent方法来解决,但是我试了没起作用,或者@touchmove.prevent.stop也不起作用.下面是几种可以解决问题的方式,仅供参考: 1.在有弹出框的页面中,加上以下方法,弹出框出现时调用禁止滚动方法stopScroll(),弹出框去掉是调取允许滚动方法canScroll()即

  • 利用vue实现打印页面的几种方法总结

    目录 1.第一种就是直接调用 window.print()方法 2.第二种使用v-print 3.第三种使用print.js 总结 1.第一种就是直接调用 window.print()方法 这种方法的坏处就是 默认打印整个页面,不能打印局部页面. 2.第二种使用v-print 首先先下载 npm install vue-print-nb --save 然后在main.js中引入 main.js中引入 import Print from 'vue-print-nb' Vue.user(Print)

  • 禁止iframe页面的所有js脚本如alert及弹出窗口等

    今天做一个小软件遇到一个问题,就是在一个页面里面需要放一个iframe框架来预览网站,可是被预览的这个网站中含有很多js脚本,如弹出窗口,提示框,最可恶的是一直让设为首页和加入收藏,我想应该有办法禁止iframe里面的脚本吧,于是百度了一下,还发现不少新大陆,于是解决了这个问题,记录下来,方便以后查询,也方便大家参考: <iframe src="fillseo.html"></iframe> fillseo.html里面有个js脚本,其中有alert,还有弹出窗

随机推荐