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 对象形式 传 ...
随机推荐
- GIT简易使用流程
git是目前世界上最先进的分布式版本控制系统(摘自廖雪峰官网) 首先需要在系统上安装git: Windows系统在这下载: RHEL/Centos/Fedora用户可以用以下命令安装:yum -y i ...
- 7,C++ public, protected, private 继承的区别
在某处看到一张图,简单明了的说明了三者的关系,很是佩服,遂记录下来. //公有继承 对象访问 成员访问 public --> public Y Y protected --> protec ...
- utf8格式源代码中的字符串,默认都会当作char来处理,除非用L""符号来修饰
原先QString("mystrr"),现在都不认了,必须都要加上L才行 原先:m_conn->put_HttpProxyAuthMethod("Basic&quo ...
- Collection用法
Queue接口与List.Set同一级别,都是继承了Collection接口.LinkedList实现了Queue接 口.在队列这种数据结构中,最先插入的元素将是最先被删除的元素:反之最后插入的元素将 ...
- Maven Jrebel 多模块热部署方案
近期在构建maven多模块项目时,发现web module依赖的其它模块,每次都要clean install成一个jar包,然后运行web module才能加载. 本生jrebel是配置在了web m ...
- elk 搭建
elk 平台搭建: ELK平台搭建 系统环境 System: Centos release 6.7 (Final) ElasticSearch: 2.1.0 Logstash: 2.1.1 Kiban ...
- OpenStack里对VPN的支持
今天翻自己的笔记找到了点去年研究Cloudpipe的东西: 对于用VLAN隔开的项目内主机的访问,可以使用CloudPipe来进行VPN访问 其实就是把OpenStack和OpenVPN集成了一下,给 ...
- 在Update Panel 控件里面添加 File Upload 控件 上传文件
Detail Information:http://www.codeproject.com/Articles/482800/FileplusUploadplusinplusUpdateplusPane ...
- Hadoop Error:Name node is in safe mode的解决方法
Error:name node is in safe mode 解决方法:hadoop dfsadmin -safemode leave(见图)
- ZOJ 3872 Beauty of Array DP 15年浙江省赛D题
也是一道比赛时候没有写出来的题目,队友想到了解法不过最后匆匆忙忙没有 A 掉 What a pity... 题意:定义Beauty数是一个序列里所有不相同的数的和,求一个序列所有字序列的Beauty和 ...