前言

在网页上打印通常都是Ctrl+p，例如百度首页打印预览：

我们有时候在项目中也会使用打印的功能，基本上都是打印网页上的一部分内容，比如某块区域的文章、表格或者标签。总的来说就是自定义需要打印的区域，接下来就让我们一起来看一下吧！

注释方式打印

html代码：

 <h1>注释区域外不需要打印的内容</h1><!--开始--><h1>注释区域需要打印的内容</h1><!--结束--><h1>注释区域外不需要打印的内容</h1><input type='button' onclick="labelPrint()" value='打印'>

页面预览：

js代码：

   function labelPrint() {//获取页面内容var html = document.body.innerHTML;  //注释内容var start = "<!--开始-->";   var end = "<!--结束-->";//通过slice截取<!--开始-->和<!--结束-->之间的内容var printHtml = html.slice(html.indexOf(start) + start.length,html.indexOf(end));//将截取的内容显示在页面上document.body.innerHTML = printHtml;  //调用浏览器打印方法window.print();//打印完成或取消打印返回之前的页面内容document.body.innerHTML = html ;}

演示：

id选择打印

html代码：

 <p>id区域外不需要打印的内容</p><p id="inner">id区域需要打印的内容</p><p>id区域外不需要打印的内容</p><input type='button' onclick="idPrint()" value='打印'>

页面预览：

js代码：

   function idPrint(){//获取页面内容var html = document.body.innerHTML;  //获得id里的内容var printHtml = document.getElementById("inner").innerHTML;//需要打印的内容渲染在页面上document.body.innerHTML = printHtml;//调用浏览器打印方法window.print();//打印完成或取消打印返回之前的页面内容document.body.innerHTML = html ;}

演示：

以上两种打印方式，都存在一个问题：如果页面注册了事件，打印的时候会重新构建当前页面内容，打印成功或者返回，只是还原了之前的页面内容，但是注册的事件会全部失效。虽然可以调用window.location.reload()重新刷新页面使事件生效，但是当页面情况比较复杂，或者打印的内容不是在第一层次（比如弹窗里面的内容）的时候，重新刷新页面就变得比较局限性了。如下：

   <p>id区域外不需要打印的内容</p><p id="inner">id区域需要打印的内容</p><p>id区域外不需要打印的内容</p><input type='button' onclick="idPrint()" value='打印'><input type='button' id="btn" value='测试打印事件'><script>var btn = document.getElementById("btn");btn.onclick = function(){alert('点击事件存在');};function idPrint(){var html = document.body.innerHTML; var printHtml = document.getElementById("inner").innerHTML;document.body.innerHTML = printHtml;window.print();document.body.innerHTML = html ;}</script>

效果预览：

可以看见取消打印之后原来注册的点击事件已经失效了，注释打印和id选择打印的原理是一样的，在这里就不进行演示了，总之重新构建页面事件就会失效，那么除了重新刷新页面还有什么方法可以使原来页面注册的事件不失效呢？？？我们来看看下一种打印方式。

新建页面打印

我们可以使用window.open()方法重新打开一个页面，将需要打印的内容放在新页面中打印，打印成功或者取消再关闭这个页面，这样就可以避免事件失效的问题了。

   <h1>新页面不需要打印的内容</h1><div id="inner"><h1>新页面需要打印的内容</h1></div><h1>新页面不需要打印的内容</h1><input type='button' onclick="broPrint()" value='打印'><input type='button' id="btn" value='测试打印事件''><script>var btn = document.getElementById("btn");btn.onclick = function(){alert('点击事件存在');};function broPrint(){//获得id里的内容var printHtml = document.getElementById("inner").innerHTML;//重新打开一个页面var newWind = window.open();//在新页面渲染需要打印的内容newWind.document.body.innerHTML = printHtml;//调用新页面的打印方法newWind.print();//打印完成或取消关闭新页面newWind.close();}</script>

效果预览：

因为原页面结构没有重新被渲染，所以打印取消事件还是存在的。但是这种方式打印的时候都会重新打开一个页面，体验感不是很好，而且以上3种方式都会在页面中显示打印内容，那么有没有什么方法不用新建页面，页面不显示打印的内容，事件不失效，也能自定义需要打印的内容呢？让我们来看看最后一种打印方式。

iframe方式打印

iframe标签是html中的一个内联框架元素，能够将一个html页面嵌入到iframe标签中，也就说明这个元素里有完整的html结构。

   <h1>iframe不需要打印的内容</h1><div id="inner"><h1>iframe需要打印的内容</h1></div><h1>iframe不需要打印的内容</h1><input type='button' onclick="iframePrint()" value='打印'><input type='button' id="btn" value='测试打印事件''><iframe id="iframe" name="iframeName" style="display:none"></iframe><script>var btn = document.getElementById("btn");btn.onclick = function(){alert('点击事件存在');};function iframePrint(){//获得id里的内容var printHtml = document.getElementById("inner").innerHTML;//将iframe标签里的body结构换成需要打印的内容document.getElementById("iframe").contentDocument.body.innerHTML = printHtml;//调用iframe这个子窗口的打印方法window.frames["iframeName"].print();}</script>

效果预览：

可以看见这种方式的体验感是最好的！！！

注意：打印定义方法的时候，名称千万不要命成function print()，因为这会覆盖掉window.print()方法。

扩展

打印区域中不需要打印的内容

在自定义打印内容区域的时候，可能有些内容不需要打印出来，我们可以使用隐藏的方式来避免打印这些内容。

   <h1>iframe不需要打印的内容</h1><hr><div id="inner"><h1>iframe需要打印的内容</h1><h1 id="hidden">iframe需要隐藏的内容</h1><h1>iframe需要打印的内容</h1></div><hr><h1>iframe不需要打印的内容</h1><input type='button' onclick="iframePrint()" value='打印'><iframe id="iframe" name="iframeName" style="display:none"></iframe><script>function iframePrint(){//需要打印的区域var printHtml = document.getElementById("inner").innerHTML;//iframe的document结构var iframeDocument = document.getElementById("iframe").contentDocument;//将iframe标签里的body结构换成需要打印的内容iframeDocument.body.innerHTML = printHtml;//将不需要打印的内容隐藏掉iframeDocument.getElementById("hidden").style.display = 'none';//调用iframe这个子窗口的打印方法window.frames["iframeName"].print();}</script>

效果预览：

可以看见iframe需要隐藏的内容这句也是打印区域的内容，设置了隐藏之后，在打印预览界面就不会显示这条信息了，可以满足我们的需求。

分页打印

浏览器自带的打印功能是根据内容多少来分页的，就是当前打印页显示不下了才会自动分页，并且有的内容还会出现上下两页分页时，将这个整体内容划开的情况：

那么有没有什么方法可以自定义打印分页呢？

css提供了可以用来设置打印分页的属性：

page-break-after：指定元素后面插入分页符。
page-break-before：指定元素前添加分页符。
page-break-inside ：指定元素中插入分页符。

一般我们都使用 page-break-after:always在元素后插入分页符。

   <h1>iframe不需要打印的内容</h1><hr><div id="inner"><h1 style="page-break-after: always">第一页内容</h1><h1 style="page-break-after: always">第二页内容</h1><h1>第三页内容</h1></div><hr><h1>iframe不需要打印的内容</h1><input type='button' onclick="iframePrint()" value='打印'><iframe id="iframe" name="iframeName" style="display:none"></iframe><script>function iframePrint(){var printHtml = document.getElementById("inner").innerHTML;var iframeDocument = document.getElementById("iframe").contentDocument;iframeDocument.body.innerHTML = printHtml;window.frames["iframeName"].print();}</script>

效果预览：

可以看见元素设置了page-break-after:always属性后，该元素之后的内容就会单独分页显示。

最后

以上只是我了解到的js网页打印的相关内容，如果哪里存在问题或者还有补充的，欢迎大家评论指出和交流！！！

js网页打印的4种方式和相关内容相关推荐

简单的html多页面设计,简洁网页设计的6种方式
简洁网页设计的6种方式简洁的网站设计一直是近年来网站设计网页设计的趋势但是简洁并不意味着极简主义,网站设计师在进行简洁网站设计时要做到简洁而不简单.简洁的网站设计是去掉了网页中多余的内容和设计,并将 ...
js获取时间戳的几种方式、时间转时间戳
js获取时间戳的几种方式.时间转时间戳前言这两个方法的返回值都是 1970/1/1 午夜距离该日期时间的毫秒数如何使用下面的例子中,我们将取得从 1970/01/01 到 2017/03/19 ...
JS数组遍历的几种方式
JS数组遍历的几种方式 JS数组遍历,基本就是for,forin,foreach,forof,map等等一些方法,以下介绍几种本文分析用到的数组遍历方式以及进行性能分析对比第一种:普通for循环代 ...
js声明变量的三种方式
JS 声明变量的三种方式 (1)使用变量步骤:a.声明-->b.赋值-->3.调用正确用法: <script type="text/javascript"> ...
python环境变量配置_Python的安装、认识、配置环境变量以及helloworld打印的两种方式
Python的安装.认识.配置环境变量以及helloworld打印的两种方式一. 安装和配置环境变量首先我们去到Python的官方下载地址根据自己的电脑机型来下载最新的python安装包,网址是h ...
[译]使用Webpack提高Vue.js应用程序的4种方式
[译]使用Webpack提高Vue.js应用程序的4种方式原文地址 Webpack是开发Vue.js单页应用程序的重要工具.通过管理复杂的构建步骤,您可以更轻松地开发工作流程,并优化应用程序的大 ...
java的如何创建js_[Java教程]JS创建事件的三种方式（实例）
[Java教程]JS创建事件的三种方式(实例) 0 2016-05-11 14:00:16 1.普通的定义方式 οnclick="Sfont=prompt('请在文本框中输入红色','红色' ...
c#获取网页源代码的5种方式
全栈工程师开发手册 (作者:栾鹏) c#教程全解 c#获取网页源代码的5种方式,发送请求获取响应数据流,按照不同的编码转换为响应字符串测试代码 static void Main() {string ...
JS 网页打印解决方案
JS 网页打印解决方案参考文章: (1)JS 网页打印解决方案 (2)https://www.cnblogs.com/sunrunzhi/p/5310020.html 备忘一下.
js焦点处理的几种方式
文章目录 1️⃣ 表单焦点处理 1.1 当成焦点时(focus) 1.2 当失去焦点时(blur) 2️⃣ 容器焦点处理 2.1 根据ID处理焦点 2.2 根据class处理焦点优质资源分享 js焦 ...

js网页打印的4种方式和相关内容

前言