js打印
js打印,其实是打印当前页面的内容,是调用 系统的js方法,来弹出 打印设置窗口,用法很简单。
window.print()就行,有的考虑到 浏览器兼容性问题,会用到document.execCommand("print")
function jsPrint(){
if (typeof (getBrowerType().ie) != "undefined") {//浏览器判断
document.execCommand('print');//弹出打印设置窗口
} else {
window.print();//弹出打印设置窗口
}
});
function getBrowerType() {
var sysType = {};
var ua = navigator.userAgent.toLowerCase();
var matchs;
(matchs = ua.match(/msie ([\d.]+)/)) ? sysType.ie = matchs[1] :
(matchs = ua.match(/trident\/([\d.]+)/)) ? sysType.ie = matchs[1] :
(matchs = ua.match(/firefox\/([\d.]+)/)) ? sysType.firefox = matchs[1] :
(matchs = ua.match(/chrome\/([\d.]+)/)) ? sysType.chrome = matchs[1] :
(matchs = ua.match(/opera.([\d.]+)/)) ? sysType.opera = matchs[1] :
(matchs = ua.match(/version\/([\d.]+).*safari/)) ? sysType.safari = matchs[1] : 0;
return sysType;
}
以上 就能够 弹出打印窗口,实现打印。那么如何选择性的 打印页面里的内容呢?
答案是,给不打印的内容 加上一个不显示的样式
<style media="print">//注意 要设置media="print",意思是在打印时变现的样式
.noPrint{//样式名字 随便取,你看得懂就好了
display:none;//设置为打印的时候不显示
}
</style> <div class=".noPrint">
这些不显示,可以把打印按钮放在这里
<input type="button" value="打印" onclick="jsPrint()"/>
这样,在打印的时候,这个div里面的内容就不会显示了。可以给多个元素设置noPrint样式
</div>
以下来个完整的例子:
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/js/jquery-ui-1.8.20.min.js"></script>
<script type="text/javascript">
function jsPrint() {
if (typeof (getBrowerType().ie) != "undefined") {
document.execCommand('print');
} else {
window.print();
}
} function getBrowerType() {
var sysType = {};
var ua = navigator.userAgent.toLowerCase();
var matchs;
(matchs = ua.match(/msie ([\d.]+)/)) ? sysType.ie = matchs[1] :
(matchs = ua.match(/trident\/([\d.]+)/)) ? sysType.ie = matchs[1] :
(matchs = ua.match(/firefox\/([\d.]+)/)) ? sysType.firefox = matchs[1] :
(matchs = ua.match(/chrome\/([\d.]+)/)) ? sysType.chrome = matchs[1] :
(matchs = ua.match(/opera.([\d.]+)/)) ? sysType.opera = matchs[1] :
(matchs = ua.match(/version\/([\d.]+).*safari/)) ? sysType.safari = matchs[1] : 0;
return sysType;
}
</script>
<style media="print">
.noPrint { display:none;
} </style>
</head>
<body>
<div>
<table>
<thead>
<tr>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期五</th> </tr>
</thead>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>体育</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>体育</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>体育</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>体育</td>
</tr> </table>
</div>
<div class="noPrint" style="border:solid 2px green">xxxxxx这些东西不要打印
<input class="noPrint" type="button" value="打印" onclick="jsPrint()" />
</div>
</body>
</html>
js打印的更多相关文章
- js 打印
关于js打印很简单的一段代码 function doPrint() { var newWindow = window.open("打印窗口", "_blank" ...
- js打印html中的内容
js打印方法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- js打印Iframe中的内容,并且不需要预览。
js打印Iframe中的内容,并且不需要预览 js代码如下: <script type="text/javascript" language="Javascript ...
- js打印保存用户输入的内容
在用js打印局部页面时,遇到用户新输入的内容没能打印出来,经过观察,发现我采用的js打印方法是读取页面源代码,而用户输入的内容如果不将其写入到页面源代码中去,是打印不出来的,下面是我的解决方法: // ...
- 使用jquery.PrintArea.js打印网页的样式问题
在使用jquery.PrintArea.js打印局部网页样式的时候,发现样式打印不出来,在网上找了好多资料,整理一下分享给大家 一.先看看css的引用文件方式 1.直接在内部的元素中使用”style” ...
- js打印页面指定区域,并去掉页眉上的时间和请求路径
需要通过js打印指定页面的内容 <style media=print type="text/css"> .noprint{visibility:hidden} < ...
- 利用JS打印质数
我爱撸码,撸码使我感到快乐!大家好,我是Counter,今天非常愉快,没有前几天的相对比较复杂的逻辑思维在里面,今天来写写,利用JS打印质数,基本上很多面试,会很经常的考到.那废话不多说,直接上代码: ...
- jquery.wordexport.js打印echarts.js画出的柱状图
jquery.wordexport.js打印echarts.js画出的柱状图. echarts画出的图是不能直接打印出来的(echarts的柱状图是用canvas画出来的),而jquery.worde ...
- 使用lodop.js打印控件打印table并分页等
import {getLodop} from '@/utils/LodopFuncs.js' //打印表格 export default{ // num 打印还是打印预览 conData 对象形式 传 ...
随机推荐
- JDBC----数据库连接池(connection pool)
•数据库连接池的基本思想就是为数据库连接建立一个"缓冲池".预先在缓冲池中放入一定数量的连接,当需要建立数据库连接时,只需从"缓冲池"中取出一个,使用完毕之后再 ...
- 我的Python成长之路---第六天---Python基础(20)---2016年2月20日(晴)
一.面向对象基础 面向对象名词解释: 类(Class): 用来描述具有相同的属性和方法的对象的集合.它定义了该集合中每个对象所共有的属性和方法.对象是类的实例. 类变量:类变量在整个实例化的对象中是公 ...
- django 基础入门(一)
1. django 基本命令 新建project django-admin.py startproject project-name 新建app python manage.py startapp a ...
- python第二步,类对象部分
类创建: class 类名: '类说明' def __init__ (self,参数):#类似php类的构造函数,self不知道什么东东 方法体 实例创建: 变量名 = 类名() #构造函数后的参数, ...
- Introduction to Json
什么是Json 是Javascript·对象的一种表示,属于轻量级数据,它比XMl小,快,易解析 作用: 用于存储和交换(转换)信息的语言,还可以将各种数据类型放在json中并进行数据传输 整理的章节 ...
- jquery 几点注意事项
jquery触发hover事件 使用 mouseenter/mouseleave/mouseover/mouseout
- 结构体struct和联合体union以及enum枚举体5的区别
下面来自wikipedia: In computer science, a union is a value that may have any of several representations ...
- 基于visual Studio2013解决C语言竞赛题之0205位数求和
题目
- Courses(最大匹配)
Courses Time Limit: 20000/10000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total S ...
- BZOJ 1270: [BeijingWc2008]雷涛的小猫( dp )
简单的dp.. dp(i,j) = max(dp(x,y))+cnt[i][j], (x,y)->(i,j)是合法路径. 设f(i)= max(dp(x,y))(1≤x≤N, 1≤y≤i), g ...