js网页打印,js打印,javascript局部打印,网页局部打印方法

一、css控制网页局部打印

举例：

<div class="noprint" >
<table style="margin:0 auto;width:500px;">  <tr align="center" ><td>  <object id="WebBrowser" classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" height="0"  width="0">  </object>  <input type="button" value="打印" onclick="document.all.WebBrowser.ExecWB(6,1)">  <input type="button" value="页面设置" onclick="document.all.WebBrowser.ExecWB(8,1)">
<input type="button" value="直接打印" onclick="document.all.WebBrowser.ExecWB(6,6)">  <input type="button" value="打印预览" onclick="document.all.WebBrowser.ExecWB(7,1)">  </td></tr>
</table>
</div>

这些内容在打印之前是显示的，当你点击打印的时候，会用上面的样式，不显示。达到了局部打印的效果！

二、js局部打印

直接上案例

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>haorooms js局部打印案例</title>
<script type="text/javascript">   function doPrint() {    bdhtml=window.document.body.innerHTML;    sprnstr="<!--startprint-->";    eprnstr="<!--endprint-->";    prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);    prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));    window.document.body.innerHTML=prnhtml; window.print();
}
</script>
</head><body>
<p>1不需要打印的地方</p>
<p>2这里不要打印啊</p>
<!--startprint--><!--注意要加上html里star和end的这两个标记，之前没加，一直没效果，谁叫咱们菜呢~-->
<h1>打印标题</h1>
<p>打印内容~~</p>
<!--endprint-->
<button type="button" onclick="doPrint()">打印</button>
<p>1haorooms博客不打印的地方啊哈哈哈哈</p>
<p>2</p>
</body>
</html>

可以把上面的代码黏贴到网页中，试一试，只有做了标记的地方打印了，代码很简单，相信你也看得懂。

延伸

通过上面的案例，我们可以看到，只要我们把要打印的东西放到document.body.innerHTML中就可以了无论是一行内容，还是图片，还是文字，只要我们把拿到的html代码，赋值给document.body.innerHTML，然后在运用window.print(); 就可以对赋值的代码进行打印了！

问题

上面的方法打印完毕之后，body的内容变掉了，不是我们想要的结果，我们可以使用一个jquery插件来实现：这个插件名字是jquery.printarea.js

使用方法：

<script src="http://www.haorooms.com/theme/assets/js/jquery.js"></script>
<script src="jquery.printarea.js"></script>
<script type="text/javascript">   function doPrint() {       $("#dayin").printArea();
}
</script><div id="dayin">
<h1>haorooms打印标题</h1>
<p>haorooms打印的文字</p>
<img src="yideng.png">
<img src="haorooms.png">
</div>

插件下载地址

关于网页打印，今天就说这么些，希望大家留言相互交流啊！

js网页打印,js打印,javascript局部打印,网页局部打印方法相关推荐

HTML5期末大作业——抗击疫情感动人物-逆行者(6页)专题网页设计 HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计
HTML5期末大作业--抗击疫情感动人物-逆行者(6页)专题网页设计 HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计常见网页设计作业题材有个人. 美 ...
html js 点击隐藏div,javascript实现显示和隐藏div方法汇总
javascript实现显示和隐藏div方法汇总 15种方法实现div显示和隐藏 body{ margin: 0; } h1,h2{ margin: 0; } ul{ margin: 0; paddi ...
js pdf文件如何调用打印机打印_可以使用Javascript打开PDF文件的打印对话框吗？...
繁花不似锦我通常使用一种类似于如何使用JavaScript打印PDF(eHow.com)的方法iframe.一个容纳打印触发器的功能......function printTrigger(eleme ...
js+打开php文档,javascript打开word文档的方法_基础知识
首先我们新建一个html文件,并且写一个FileUpLoad以及button控件. 代码如下: fileUpload 然后,在写一个javascript OpenFile方法. 代码如下: funct ...
js打开服务器word文件,javascript打开word文档的方法
首先我们新建一个html文件,并且写一个FileUpLoad以及button控件. 代码如下: fileUpload 然后,在写一个javascript OpenFile方法. 代码如下: funct ...
网页中JS实现（调用）打印预览功能
近期的项目中需要在页面中实现打印预览功能--点击网页中的"打印"(Print),弹出打印预览窗口,点击窗口页面中的"开始打印"(Print),则出现浏览器的打印 ...
NoPrint.js：使用JavaScript在HTML中禁用打印、截屏、复制和粘贴
NoPrint.js是一个小巧整洁的开源JS库,可禁用HTML中的打印.截图.复制和粘贴功能.它还提供启用AutoBlur选项,让鼠标离开网页后内容变得模糊.这个功能可以阻止大多数普通用户截取屏幕截图 ...
android网页打印,安卓网页打印,h5页面打印,浏览器打印,js打印工具
Android设备打印比较麻烦,一般设备厂商都提供原生app开发的SDK,我们web开发者为难了,不会原生开发啊给大家提供一个思路,实现web加壳,利用打印浏览器实现简单来说就是把我们的web页面 ...
6.2 新浪财经——资产负债表获取（打印js渲染后的网页表格）
在搜索引擎中搜索"贵州茅台新浪财经",进入新浪财经中"贵州茅台"的(https://finance.sina.com.cn/realstock/company ...

js网页打印,js打印,javascript局部打印,网页局部打印方法

一、css控制网页局部打印

二、js局部打印

延伸

问题

js网页打印,js打印,javascript局部打印,网页局部打印方法相关推荐

最新文章

热门文章