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

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

首页

web前端

html教程

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

Linda Hamilton

Apr 04, 2025 pm 10:30 PM

css 为什么

为什么使用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>打印预览<body>');
        doc.body.appendChild(document.querySelector('#divKanZhengPanel-binli').cloneNode(true));
        doc.write('</script>

登录后复制

以上是为什么使用JavaScript打印表单时，某些修改的内容不生效？的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7915

Java教程

1652

CakePHP 教程

1411

Laravel 教程

1303

PHP教程

1248

显示更多

Related knowledge

如何在父分类的存档页面上显示子分类 Apr 19, 2025 pm 11:54 PM

您想了解如何在父分类存档页面上显示子分类吗？在自定义分类存档页面时，您可能需要执行此操作，以使其对访问者更有用。在本文中，我们将向您展示如何在父分类存档页面上轻松显示子分类。为什么在父分类存档页面上显示子分类？通过在父分类存档页面上显示所有子分类，您可以使其不那么通用，对访问者更有用。例如，如果您运行一个关于书籍的WordPress博客，并且有一个名为“主题”的分类法，那么您可以添加“小说”、“非小说”等子分类法，以便您的读者可以

HTML与CSS和JavaScript：比较Web技术 Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术：1.HTML定义网页结构，2.CSS负责网页外观，3.JavaScript提供网页动态和交互性，它们共同作用，打造出用户体验良好的网站。

2025币圈交易所哪些安全性比较好？ Apr 20, 2025 pm 06:09 PM

2025年币圈十大安全靠谱交易所包括：1. 币安（Binance），2. OKX（欧易），3. Gate.io（芝麻开门），4. Coinbase，5. Kraken，6. Huobi Global（火币），7. Gemini，8. Crypto.com，9. Bitfinex，10. KuCoin（库币）。这些交易所基于合规性、技术实力与用户反馈被评为安全靠谱。