JavaScript 打印Div内容

最新推荐文章于 2023-08-10 22:31:07 发布

alili1991

最新推荐文章于 2023-08-10 22:31:07 发布

阅读量165

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/babietongtianta/p/4961142.html

版权

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>

    <script language="javascript" type="text/javascript">
        function printDiv(divID) {
            //Get the HTML of div
            var divElements = document.getElementById(divID).innerHTML;
            //Get the HTML of whole page
            var oldPage = document.body.innerHTML;

            //Reset the page's HTML with div's HTML only
            document.body.innerHTML = 
              "<html><head><title></title></head><body>" + 
              divElements + "</body>";

            //Print Page
            window.print();

            //Restore orignal HTML
            document.body.innerHTML = oldPage;

          
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div id="printablediv" style="width: 100%; background-color: Blue; height: 200px">
        请打印这里
    </div>
    <div id="donotprintdiv" style="width: 100%; background-color: Gray; height: 200px">
        这里是不打印的
    </div>
    <input type="button" value="Print 1st Div" οnclick="javascript:printDiv('printablediv')" />
    </form>
</body>
</html>

如果打印的网页设置引用了CSS样式文件，需要对样式文件进行导入，修改后的方法如下：

function printDiv(divID,title) {
        
    var links = document.getElementsByTagName("link");

    var styleContent = "";

    for (var i = 0, l = links.length; i < l; i++) {
        var src = links[i].href;

        styleContent += "<link href=\"" + src + "\" rel=\"stylesheet\" type=\"text/css\" />";
    }

    //Get the HTML of div
    var divElements = document.getElementById(divID).innerHTML;
    //Get the HTML of whole page
    var oldPage = document.body.innerHTML;
    
    var titleDiv = "<div style=\"text-align:center;width:100%;\"><h2>" + title + "</h2></div>";

    //Reset the page's HTML with div's HTML only
    document.body.innerHTML =
      "<html><head><title>报表打印</title>" + styleContent + "</head><body>" + titleDiv + 
      divElements + "</body>";
    

    window.print();


    //Restore orignal HTML
    document.body.innerHTML = oldPage;
}

转载于:https://www.cnblogs.com/babietongtianta/p/4961142.html

alili1991

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 打印Div内容

<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Untitled Page</title> <script language="javascript" type="text/javascript"> functio...
复制链接

扫一扫