為什麼使用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工具

熱工具

熱門話題

Java教學

1655

CakePHP 教程

1414

Laravel 教程

1307

PHP教程

1253

C# 教程

1227

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提供網頁動態和交互性，它們共同作用，打造出用戶體驗良好的網站。

虛擬幣價格上漲或者下降是為什麼虛擬幣價格上漲或者下降的原因 Apr 21, 2025 am 08:57 AM

虛擬幣價格上漲因素包括：1.市場需求增加，2.供應量減少，3.利好消息刺激，4.市場情緒樂觀，5.宏觀經濟環境；下降因素包括：1.市場需求減少，2.供應量增加，3.利空消息打擊，4.市場情緒悲觀，5.宏觀經濟環境。

為什麼Spring項目啟動時會因為循環依賴導致隨機性問題？ Apr 19, 2025 pm 11:21 PM

理解Spring項目啟動中循環依賴的隨機性在進行Spring項目開發時，可能會遇到項目啟動時由於循環依賴導致的隨機...

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（庫幣）。這些交易所基於合規性、技術實力與用戶反饋被評為安全靠譜。