本文转载自: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调用打印机 打印整体或部分的更多相关文章

  1. js调用打印机 打印整体或部分

    有时前端的项目中需要添加打印的功能,首先要知道打印分为整体打印和局部打印两种,而局部打印又可细分为局部打印指定的部分,和局部打印指定部分之外的部分.实例比文字看起来更清晰,下面我将用代码来描述 1.整 ...

  2. js调用打印机打印

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Java jacob调用打印机打印word文档

    前面说了Java如何生成复杂的Word文档,今年记录下Java如何调用打印机打印word文档. 起初用的是自带的PrintJob,但是系统提供的打印机制并不成熟完整.网上的代码也是千篇一律,在我的打印 ...

  4. C# 调用打印机打印文件

    C# 调用打印机打印文件,通常情况下,例如Word.Excel.PDF等可以使用一些对应的组件进行打印,另一个通用的方式是直接启用一个打印的进程进行打印.示例代码如下: using System.Di ...

  5. aspose调用打印机打印文档

    aspose很不错的插件,功能非常强大,用到了其中的aspose.word. 如何生成word文档,点击. 下面说说如何如何通过打印机打印文档. aspose提供了一个print方法,通过该方法可以直 ...

  6. 使用jqPrint.js调用浏览器打印界面,打印网页中的某一部分该部分含有ECharts图表

    1.准备好js文件(我用的是谷歌浏览器) 这个文件是为了防止你的jQuery版本过高而不适配的问题 这是调用浏览器打印的js插件 2.引入js文件 <script src="js/jq ...

  7. js调用页面打印

    ----------------------调用页面打印-------------------------------- <body> <div id="divPrint& ...

  8. js调用浏览器打印

    <input type="button" id="print" onclick="printdiv('list');" value=& ...

  9. js调用打印机

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. mysql存储过程、函数、触发器、

    当数据库版本不允许直接使用存储过程.函数的语法时用delimiter // 将结束符改成//用完之后再写delimiter;将结束符改回来即可,调用过程.函数用call+其名字即可返回结果 delim ...

  2. mac、windows系统charles安装破解

    一.下载 官网下载适合自己电脑的最新版本 下载地址:https://www.charlesproxy.com/latest-release/download.do 二.破解 破解地址:https:// ...

  3. [ERR] 153 - Got a packet bigger than 'max_allowed_packet' bytes

    异常原因: 用客户端导入数据的时候,信息包过大 ,终止了数据导入,需要修改max_allowed_packet 参数 解决方案: 1. sql语句修改( ⚠️重启服务设置会失效) 登陆mysql查看当 ...

  4. 02、python的基础-->占位符、while...else...、逻辑运算符

    1.%s.%d格式化输出程序(%占位符,s字符串,d数字) name = input('请输入姓名:') age = input('请输入年龄:') job = input('请输入工作:') hob ...

  5. jQuery选择器我犯的错误(原创)

    jQuery的选择器十分强大,但是在使用jQuery选择器的时候一定要十分小心,空格.冒号.引号到处都是坑,老手也不能避免,只能勤加练习,熟能生巧,掌握规律,为了练习,凡是到选择器的地方我都自己先敲, ...

  6. 关于pandas

    axis轴,axis=0为逐行,axis=1为逐列

  7. 子元素位于父元素中央 css实现

    wrap .box{ width: 200px; height:200px; background: pink; // 方案1 position: absolute; top:0; left:0; r ...

  8. SpringMVC 与axis2 的整合(服务器端)

    1,新建一个web project项目,项目的目录 如下: 2,导入需要的jar包,本例用的是axis2 1.7.3版本. 3,创建接口. package com.dsdl.hcm.webServic ...

  9. Transformer 学习

    https://www.bilibili.com/video/av65521101/?p=98 (李宏毅,视频讲解,可以作为基础入门) 课件:https://pan.baidu.com/s/1Shjn ...

  10. BZOJ 1576: [Usaco2009 Jan]安全路经Travel

    日常自闭半小时后看题解,太弱了qwq. 感觉这道题还是比较难的,解法十分巧妙,不容易想到. 首先题目说了起点到每个点的最短路都是唯一的,那么对这个图求最短路图必定是一棵树,而且这棵树是唯一的. 那么我 ...