(转载)js调用打印机 打印整体或部分
本文转载自:https://www.cnblogs.com/lfhy/p/6802781.html
以下为原文内容:
有时前端的项目中需要添加打印的功能,首先要知道打印分为整体打印和局部打印两种,而局部打印又可细分为局部打印指定的部分,和局部打印指定部分之外的部分。实例比文字看起来更清晰,下面我将用代码来描述
1、整体打印
这是最简单的部分
<button id="print1">打印全部</button>
$('#print1').click(function(){
window.print();
});
简单的一行js代码即可搞定
2、局部打印指定部分
下面的代码中我们主要用第二个button
html代码
|
1
2
3
4
5
6
7
8
9
|
<p>下面是百度的图片</p><div> <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png"> </div><button id="print1">打印全部</button><button id="print2" onclick="doPrint()">打印指定部分(以打印图片为例)</button><button id="print3">打印除某部分之外的的部分</button> |
js代码:
|
1
2
3
4
5
6
7
8
9
10
|
function doPrint() { bdhtml=window.document.body.innerHTML; sprnstr="<!--startprint-->"; //开始打印标识字符串有17个字符 eprnstr="<!--endprint-->"; //结束打印标识字符串 prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); //从开始打印标识之后的内容 prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); //截取开始标识和结束标识之间的内容 window.document.body.innerHTML=prnhtml; //把需要打印的指定内容赋给body.innerHTML window.print(); //调用浏览器的打印功能打印指定区域 window.document.body.innerHTML=bdhtml; // 最后还原页面 } |
用法:
比如我想打印html页面中的图片,将上述js代码复制,在html文档中img标签前加上‘<!--startprint-->’,标签后加上‘’<!--endprint-->即可
图例:
js代码中的17指的就是‘<!--startprint-->’的长度。
3.局部打印指定部分之外的内容
其实原理也很简单,就是在打印前将指定部分隐藏,打印后再将指定的部分显示出来
js代码:
|
1
2
3
4
5
|
$('#print3').click(function(){ $('p').hide(); window.print(); $('p').show();}); |
这段代码就是打印除p之外的部分了
(转载)js调用打印机 打印整体或部分的更多相关文章
- js调用打印机 打印整体或部分
有时前端的项目中需要添加打印的功能,首先要知道打印分为整体打印和局部打印两种,而局部打印又可细分为局部打印指定的部分,和局部打印指定部分之外的部分.实例比文字看起来更清晰,下面我将用代码来描述 1.整 ...
- js调用打印机打印
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Java jacob调用打印机打印word文档
前面说了Java如何生成复杂的Word文档,今年记录下Java如何调用打印机打印word文档. 起初用的是自带的PrintJob,但是系统提供的打印机制并不成熟完整.网上的代码也是千篇一律,在我的打印 ...
- C# 调用打印机打印文件
C# 调用打印机打印文件,通常情况下,例如Word.Excel.PDF等可以使用一些对应的组件进行打印,另一个通用的方式是直接启用一个打印的进程进行打印.示例代码如下: using System.Di ...
- aspose调用打印机打印文档
aspose很不错的插件,功能非常强大,用到了其中的aspose.word. 如何生成word文档,点击. 下面说说如何如何通过打印机打印文档. aspose提供了一个print方法,通过该方法可以直 ...
- 使用jqPrint.js调用浏览器打印界面,打印网页中的某一部分该部分含有ECharts图表
1.准备好js文件(我用的是谷歌浏览器) 这个文件是为了防止你的jQuery版本过高而不适配的问题 这是调用浏览器打印的js插件 2.引入js文件 <script src="js/jq ...
- js调用页面打印
----------------------调用页面打印-------------------------------- <body> <div id="divPrint& ...
- js调用浏览器打印
<input type="button" id="print" onclick="printdiv('list');" value=& ...
- js调用打印机
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 人物-IT-胡玮炜:百科
ylbtech-人物-IT-胡玮炜:百科 胡玮炜,女,汉族,1982年出生于浙江东阳,毕业于浙江大学城市学院新闻系,摩拜单车创始人 . 2004年胡玮炜从浙江大学城市学院新闻系毕业后进入<每日经 ...
- 发送验证码倒计时60s
var wait=60; function time(o) { if (wait == 0) { o.removeClass("gray"); o.text("发送验证码 ...
- CentOS 7 64位虚拟机安装过程
第一步:新建一个虚拟机,选择典型安装,点击下一步.
- 深入理解javascript原型和闭包(1)——一切都是对象 (转载)
深入理解javascript原型和闭包(1)——一切都是对象 http://www.cnblogs.com/wangfupeng1988/p/3977987.html “一切都是对象”这句话的重点在 ...
- Python 如何debug
一.常见错误: 1.漏了末尾的冒号,如 if语句,循环语句,定义函数 2.缩进错误,该缩进的时候没有缩进 3.把英文符号写成中文符号,如: ' ' () , 4.字符串拼接,把字符串和数字拼接一起 ...
- 多线程实现奇偶统计v1 - 暴力版
#include <stdio.h> #include <stdlib.h> #include <time.h> #include "pthread.h& ...
- Python之字符串正则匹配
需求: 正则表达式匹配某个文本模式,但是它找到的是模式的最长可能匹配(因为是贪婪匹配 ). 而你想修改它变成查找最短的可能匹配. import re text2 = 'Computer says &q ...
- js异步处理
一.什么是异步? 我们一般喜欢把异步和同步.并行拿出来比较,我以前的理解总是很模糊,总是生硬地记着“同步就是排队执行,异步就是一起执行”,现在一看,当初简直就是傻,所以我们第一步先把这三个概念搞清楚, ...
- Elasticsearch添加Shield后TransportClient如何连接?
Elasticsearch添加Shield后TransportClient如何连接? 时间 2015-12-28 10:24:01 旁门左道 原文 http://log.medcl.net/ite ...
- Android开发 Butterknife使用方法总结
前言: ButterKnife是一个专注于Android系统的View注入框架,以前总是要写很多findViewById来找到View对象,有了ButterKnife可以很轻松的省去这些步骤.是大神J ...