JavaScript打印网页指定区域的例子_javascript技巧

JavaScript打印页面指定div区域原理:使用window.open()在浏览器打开一个新的页面(window), 使用 window.document.write()将指定div区域的内容写入新窗口文档,document.close()关闭文档,使用window.print()调用打印机打印当前文档。

JavaScript打印函数myPrint(obj):

复制代码 代码如下:

function myPrint(obj){
    //打开一个新窗口newWindow
    var newWindow=window.open("打印窗口","_blank");
    //要打印的div的内容
    var docStr = obj.innerHTML;
    //打印内容写入newWindow文档
    newWindow.document.write(docStr);
    //关闭文档
    newWindow.document.close();
    //调用打印机
    newWindow.print();
    //关闭newWindow页面
    newWindow.close();
}

myprint()调用方法:

复制代码 代码如下:

myPrint(document.getElementById('printDivID'));

实例代码:

复制代码 代码如下:

<script>
function myPrint(obj){
    var newWindow=window.open("打印窗口","_blank");
    var docStr = obj.innerHTML;
    newWindow.document.write(docStr);
    newWindow.document.close();
    newWindow.print();
    newWindow.close();
}
</script>
<div id="print">
<hr />
   打印演示区域,点击打印后会在新窗口加载这里的内容!
<hr />
</div>
<button onclick="myPrint(document.getElementById('print'))">打 印</button>

时间: 2024-11-03 22:11:23

JavaScript打印网页指定区域的例子_javascript技巧的相关文章

window.print打印指定div指定网页指定区域的方法_javascript技巧

第一种方法:指定不打印区域使用CSS,定义一个.noprint的class,将不打印的内容放入这个class内. 细如下: <style media=print type="text/css"> .noprint{visibility:hidden} </style> 要打印的内容.哈哈! <p class="noprint">将不打印的代码放在这里.</p> <a href="javascript:w

Javascript打印网页部分内容的脚本_javascript技巧

正常情况下的打印是使用 window.print(); 直接整页打印,但如果需要打印网页中定义的部分内容,则可使用如下的方法: 1.在页面的代码头部处加入JavaScript: JavaScript代码 复制代码 代码如下: <script language=javascript> function doPrint() { bdhtml=window.document.body.innerHTML; sprnstr="<!--startprint-->"; ep

js print打印网页指定区域内容的简单实例_javascript技巧

实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co

js print打印网页指定区域内容

比较简单的办法 使用CSS,定义一个.noprint的class,将不打印的内容放入这个class内. 细如下:  代码如下 复制代码 <style media=print type="text/css">   .noprint{visibility:hidden}  </style>  要打印的内容.哈哈!  代码如下 复制代码 <p class="noprint">将不打印的代码放在这里.</p> <a hr

使用JavaScript解决网页图片拉伸问题(推荐)_javascript技巧

问题描述 这段时间在做PM的需求的时候突然发现一个问题,产品上的图片来自多个第三方,具体的尺寸无法确定,如果直接在样式中写死图片的尺寸大小就会出现图片拉伸的现象,十分影响产品的美观,因此希望可以找到一个比较好的解决方案.自己先做了一个简单的demo来展示问题. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <

javascript获取网页宽高方法汇总_javascript技巧

document.body.clientWidth - 网页可见区域宽 document.body.clientHeight - 网页可见区域高 document.body.offsetWidth - 网页可见区域宽,包括边线和滚动条的宽 document.body.offsetHeight - 网页可见区域高,包括边线和滚动条的高[FF,chrom下是整个页面高,IE opera 下正常] document.body.scrollWidth - 网页总宽 document.body.scrol

javascript判断网页是关闭还是刷新_javascript技巧

原理就是通过离开页面行为时间onunload触发时间去检测此时的浏览器的窗口大小,根据大小由此判断用户是刷新,跳转或是关闭行为程序  代码如下  window.onunload = function(){ var a_n = window.event.screenX - window.screenLeft; var a_b = a_n > document.documentElement.scrollWidth-20; if(a_b && window.event.clientY&l

javascript实现网页字符定位的方法_javascript技巧

本文实例讲述了javascript实现网页字符定位的方法.分享给大家供大家参考.具体如下: 这里实现输入要查询的字符串,点击定位后程序会自动跳到匹配的位置上 <html> <form name="f1" action="" onSubmit="if(this.t1.value!=null && this.t1.value!='') findString(this.t1.value);return false"&g

JavaScript计算器网页版实现代码分享_javascript技巧

JavaScript网页计算器代码,该计算器是用DW写的!HTML篇 <html <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>计算器</title> <link href="style/calculator.css" rel="stylesheet&quo