您的位置：首页 > Web前端 > JavaScript

js/jq 实现页面的打印功能

2018-01-02 16:10 441 查看

刚结束页面的打印操作，就将此进行记录下来

js 页面打印

1.整个页面进行打印

<input id="btnPrint" type="button" value="打印" onclick="javascript:window.print();" />

2.局部页面进行打印

html代码：

<input id="btnPrint" type="button" value="打印" onclick="preview(1)" />

js代码：

function preview(text)
{
if (text < 10)
{
var bdhtml = window.document.body.innerHTML;//获取当前页的html代码
var sprnstr = "<!--startprint"+oper+"-->";//设置打印开始区域
var eprnstr = "<!--endprint"+oper+"-->";//设置打印结束区域
var prnhtml = bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //从开始代码向后取html

var prnhtmlprnhtml = prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html
window.document.body.innerHTML = prnhtml;
window.print();
window.document.body.innerHTML = bdhtml;
} else {
window.print();
}
}

发现一个很通俗的局部打印操作，就是在整个页面打印之前将不需要的部分进行隐藏操作，调用window的打印功能后将不需要的部分再显现出来。如下：（此方式可能不利于页面的渲染）

function preview()
{
$("不需要打印的部分").hide();

window.print();

setTimeout(function () {
$("不需要打印的部分").show()
},10);
}

jq 页面打印

实现局部打印

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.PrintArea.js"></script>
<script>
$(function(){
$("#btnPrint").click(function(){

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

});
});

</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 打印 javascript

相关文章推荐

新的分享

章节导航