本文转载自: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. SQLServer 用法简例

      子曰:“温故而知新,可以为师矣.”孔子说:“温习旧知识从而得知新的理解与体会,凭借这一点就可以成为老师了.“ 尤其是咱们搞程序的人,不管是不是全栈工程师,都是集十八般武艺于一身.不过有时候有些知识 ...

  2. nginx安装教程(详细)

    所见即所得编辑器, editorhtml{cursor:text;*cursor:auto} img,input,textarea{cursor:default}.cke_editable{curso ...

  3. postgis常用的函数

    常见函数:http://postgis.net/docs/reference.html ST_GeometryType(geometry)    ——    返回几何图形的类型 ST_NDims(ge ...

  4. java 重新学习 (五)

    Set 集合 一.HashSet按照Hash算法存储集合元素(hashCode方法获取hashCode值,根据hashCode值获取元素位置,通过equals判断对象是否相等并且hashCode值是否 ...

  5. python基础【第十篇】

    Python文件操作 1.常规格式 f = open(file="文件所在路径/文件名",mode="操作模式",encoding="选择的编码&qu ...

  6. 在Python中检测*可用* CPU数量的便携方式

    根据这个问题和答案 - Python multiprocessing.cpu_count()在4核Nvidia Jetson TK1上返回'1' - Python multiprocessing.cp ...

  7. Neo4j数据库学习一:安装和数据类型常用命令简介

    Neo4j数据库是图数据库 在数据库中,只有节点Nodes和关系Relationships Nodes用圆圈表示,Relationships用有向箭头表示 关系和节点都有属性(键值对) 安装3.3.7 ...

  8. Tips using Manjaro

    Set swappiness value The default swappiness value is set 60 as you can check it via the following co ...

  9. HashMap循环

    1. Map的四种遍历方式下面只是简单介绍各种遍历示例(以HashMap为例),各自优劣会在本文后面进行分析给出结论. (1) for each map.entrySet()   Java   1 2 ...

  10. Gym 102007I 二分 网络流

    题意:给你一张图,每个城市有一些人,有不超过10个城市有避难所,避难所有容量上限,问最快多久可以让所有人进入避难所? 思路:二分时间,对于每个时间跑一遍最大流,判断最大流是不是人数即可.我们还需要用二 ...