为什么使用JavaScript打印表单时，某些修改的内容不生效？-html教程-PHP中文网

为什么使用JavaScript打印表单时，某些修改的内容不生效？

霞舞

发布： 2025-03-31 09:42:35

原创

933人浏览过

为什么使用javascript打印表单时，某些修改的内容不生效？

解决JavaScript表单打印内容不更新的问题

使用JavaScript打印网页表单时，有时会发现用户修改后的内容并未体现在打印预览中。这是因为直接获取表单HTML（例如使用.prop("outerHTML")）无法捕捉到实时用户输入。例如，文本框内容或复选框状态可能无法正确反映。

问题在于，直接获取HTML并不能实时更新动态修改的内容。为了解决这个问题，需要使用cloneNode(true)方法克隆表单节点，确保克隆的节点包含所有最新的用户输入和状态变化。

以下是一个改进后的代码示例，演示如何使用cloneNode(true)解决这个问题：

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<div id="divKanZhengPanel-binli">
    <div>
        <div class="checkDiv">
            <label>正位</label>
            <label>外显斜</label>
            <label>内显斜</label>
            <label>外隐斜</label>
            <label>内隐斜</label>
        </div>
    </div>
</div>
<button id="dw">点我打印</button>

<script>
    document.getElementById('dw').addEventListener('click', function() {
        $('#print-iframe').remove(); // 清除之前的iframe
        let iframe = document.createElement('iframe');
        iframe.id = 'print-iframe';
        iframe.style.cssText = 'position:absolute;width:0px;height:0px;left:-0px;top:-0px;visibility:hidden;';
        document.body.appendChild(iframe);

        let doc = iframe.contentWindow.document;
        doc.open();
        doc.write('<html><head><title>打印预览</title></head><body>');
        doc.body.appendChild(document.querySelector('#divKanZhengPanel-binli').cloneNode(true));
        doc.write('</body></html>');
        doc.close();

        iframe.contentWindow.focus();
        iframe.contentWindow.print();
    });
</script>

登录后复制

使用此代码，打印预览将准确显示用户在文本框和复选框中所做的所有修改，确保打印内容与页面显示内容一致。