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

最新推荐文章于 2024-05-11 07:22:55 发布

阡路陌人

最新推荐文章于 2024-05-11 07:22:55 发布

阅读量2.7k

点赞数 2

分类专栏： javaScript 文章标签：打印 javascript

本文链接：https://blog.csdn.net/m0_37852904/article/details/78952801

版权

javaScript 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

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

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>