我要评论
解决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>登录后复制
使用此代码，打印预览将准确显示用户在文本框和复选框中所做的所有修改，确保打印内容与页面显示内容一致。
打印效果: 用户在页面上的所有输入和选择都将正确地显示在打印预览中。
以上就是为什么使用javascript打印表单时，某些修改的内容不生效？的详细内容，更多请关注代码网其它相关文章！
发表评论