本文转载自: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. 【转】理解JMX之介绍和简单使用

    原文链接:https://blog.csdn.net/lmy86263/article/details/71037316 近期在项目上需要添加一些功能,想把一个开源工程整合进来,虽说是整合,但是觉得跟 ...

  2. HashCode方法整理

    哈希表这个数据结构想必大多数人都不陌生,而且在很多地方都会利用到hash表来提高查找效率.在Java的Object类中有一个方法: 1 public native int hashCode(); 根据 ...

  3. 5. 使用grafana模板

    我们刚刚配置的Dashboard还是有点简陋,为了界面美观,这里我们这里使用一些模板 1.使用node_exporter模板 去grafana官网下载模板,点击Download,如下所示 2.导入模板 ...

  4. ROW_NUMBER() over(order by ID desc ) as RowNumber 返回类型问题

    因为ID是int类型,所以ROW_NUMBER() over(order by ID desc ) as RowNumber 想当然的认为是Int类型 实际ROW_NUMBER() over(orde ...

  5. VIP视频下载终结器

    youtube-dl: Youtube-dl是谷歌github上的一个开源项目,它是一款轻量级的命令行 下载实用工具,阿刚曾在乐软博客里文章<不仅仅是youtube,youtube-dl在线视频 ...

  6. 2019秋季学期第2周Java学习总结

    本周在第一周接触认识Java后对该编程语言有了进一步了解,明白了Java的类型:包括Application程序,Applet程序.知道了一个Java程序的关键字(public class).主方法(p ...

  7. mybatis之增删改

    前面三小节内容主要是针对查询操作进行讲解,现在对mybatis增删改进行演示. 由于每次建立工程比较复杂,可以参考第一节:mybatis入门来搭建一个简单的工程,然后来测试本节内容. 1.增 1.新增 ...

  8. 【模板】fread读入优化 & fwrite输出优化

    #include <iostream> #include <cstdio> #include <cctype> #define SIZE (1 << 2 ...

  9. python之路——操作系统的发展史

    阅读目录 手工操作 —— 穿孔卡片 批处理 —— 磁带存储和批处理系统 多道程序系统 分时系统 实时系统 通用操作系统 操作系统的进一步发展 操作系统的作用 手工操作 —— 穿孔卡片 1946年第一台 ...

  10. CF1168C

    CF1168C 从后往前扫一遍维护\(f[x][k]\)表示从开始x至少要走到那个位置才能到达一个第\(k\)位是1的数 #include<iostream> #include<cs ...