详解怎么使用JavaScript打印div元素的内容

本文的主要内容则是教大家怎么使用JavaScript打印div元素的内容！

那么要在 JavaScript 中打印 div 的内容，我们需要整理好实现的思路：

首先将 div 的内容存储在 JavaScript 变量中；然后单击打印按钮，提取 HTML div 元素的内容；然后创建一个 JavaScript 弹出窗口，并将提取的 HTML div 元素的内容写入弹出窗口；最后使用 JavaScript 窗口打印命令打印该窗口。

下面我们就通过两种方法来实现：

第一种方法：本示例使用 JavaScript 窗口打印命令打印 div 元素的内容

!DOCTYPE html>
    html>
    head>
        meta charset=utf-8 />
        tITle>
    /title>
        script>
        function PRintDiv() {
                VAR divContents = document.getElementById("GFG").innerHTML;
                var a = window.open('', '', 'height=500, width=500');
                a.document.write('html>
    ');
                a.document.write('body >
     h1>
    Div contents are br>
    ');
                a.document.write(divContents);
                a.document.write('/body>
    /html>
    ');
                a.document.close();
                a.print();
        }
        /script>
    /head>
    body style="text-align:center;
    ">
    div id="GFG" style="background-color:#00a2d4;
    ">
        h2>
    PHP中文网/h2>
        p>
            这是在div中，点击按钮后则会显示打印。    /p>
    /div>
    input type="button" value="点击打印" onclick="printDiv()">
    /body>
    /html>
    

点击按钮前的效果如下：

接着我们点击“点击打印”按钮，出现如下图：

第二种方法：本示例使用 JavaScript 窗口打印命令打印 div 元素的内容

!DOCTYPE html>
    html>
    head>
        meta charset=utf-8 />
        title>
    /title>
        script>
        function printDiv() {
                var divContents = document.getElementById("GFG").innerHTML;
                var a = window.open('', '', 'height=500, width=500');
                a.document.write('html>
    ');
                a.document.write('body >
     h1>
    Div contents are br>
    ');
                a.document.write(divContents);
                a.document.write('/body>
    /html>
    ');
                a.document.close();
                a.print();
        }
        /script>
    /head>
    body>
    center>
        div id="GFG" style="background-color:#9a9afb;
    ">
            h2>
    PHP中文网/h2>
            table border="1px">
                tr>
                    td>
    姓名/td>
                    td>
    分数/td>
                /tr>
                tr>
                    td>
    张三/td>
                    td>
    110/td>
                /tr>
            /table>
        /div>
        p>
            表格在div中，点击按钮就会打印出来。    /p>
        input type="button" value="点击打印"           onclick="printDiv()">
    /center>
    /body>
    /html>
    

点击按钮前的效果如下：

点击“点击打印”按钮后的效果，则如下所示：

最后给大家推荐《JavaScript基础教程》~欢迎大家学习~

以上就是详解怎么使用JavaScript打印div元素的内容的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！