手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >js调用iframe实现打印页面内容的方法
js调用iframe实现打印页面内容的方法
摘要:1、程序说明1)此程序可以实现选择页面中的区域进行打印,以iframe方式进行打印;2)与原生态的print()区别在于,取消打印页面后可以...

1、程序说明

1) 此程序可以实现选择页面中的区域进行打印,以iframe方式进行打印;

2) 与原生态的print() 区别在于,取消打印页面后可以完整保留当前访问页面的内容。

2、代码部分

1) JS 函数:

复制代码 代码如下:

function do_print(id_str)//id-str 打印区域的id

{

var el = document.getElementById(id_str);

var iframe = document.createElement('IFRAME');

var doc = null;

iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;');

document.body.appendChild(iframe);

doc = iframe.contentWindow.document;

// 引入打印的专有CSS样式,www.111Cn.net根据实际修改

doc.write("<LINK rel="stylesheet" type="text/css" href="css/print.css">");

doc.write('<div>' + el.innerHTML + '</div>');

doc.close();

iframe.contentWindow.focus();

iframe.contentWindow.print();

if (navigator.userAgent.indexOf("MSIE") > 0)

{

document.body.removeChild(iframe);

}

}

2) HTML:

复制代码 代码如下:

// 打印区域:

<div id="print_box">

......

</div>

// 调用打印

<button>打印</button>

3. 测试

点击页面上的打印按钮,即可测试打印;

除了上面方法我们还可以通过jquery来实例,代码如下

复制代码 代码如下:

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="jquery.PrintArea.js"></script>

<script>

$(document).ready(function(){

$("input#biuuu_button").click(function(){

$("div#myPrintArea").printArea();

});

});

</script>

<input id="biuuu_button" type="button" value="打印"></input>

<div id="myPrintArea">.....文本打印部分.....</div>

如果要实现区域打印我们可尝试下面方法

下面本文分享一种超简单的方法实现页面的打印功能,不仅可以打印整个页面,还可以打印页面某块区域

复制代码 代码如下:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script language="javascript">

function printdiv(printpage){

var headstr="<html><head><title></title></head><body>";

var footstr="</body>";

var newstr=document.all.item(printpage).innerHTML;

var oldstr=document.body.innerHTML;

document.body.innerHTML=headstr+newstr+footstr;

window.print();

document.body.innerHTML=oldstr;

return false;

}

</script>

<title>div print</title>

</head>

<body>

<input type="button" value=" 打印 ">

<div id="div_print">

<h1>被打印区域:www.jb51.net</h1>

</div>

这块区域是打印不到的!

</body>

</html>

【js调用iframe实现打印页面内容的方法】相关文章:

jQuery实现自动滚动到页面顶端的方法

javascript实现树形菜单的方法

JS+DIV实现鼠标划过切换层效果的方法

JavaScript实现将UPC转换成ISBN的方法

jquery插件splitScren实现页面分屏切换模板特效

jQuery切换所有复选框选中状态的方法

jQuery实现限制textarea文本框输入字符数量的方法

jQuery实现将页面上HTML标签换成另外标签的方法

JavaScript基于setTimeout实现计数的方法

JavaScript实现单击下拉框选择直接跳转页面的方法

精品推荐
分类导航