如何将HTML表单输入字段中用户填写的数据打印到纸质副本？

问题原因 #

你的代码触发打印时仅获取表单初始HTML源码，用户填写的输入内容只存在于DOM的value属性中，不会被包含在outerHTML返回的内容里，因此打印窗口无法显示用户输入的信息。

修复方案 #

在提取表单HTML内容前，先将所有输入框的当前值同步到标签的value属性上即可，修改后的完整代码如下：

<!DOCTYPE html>
<html>
<title>Print form</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<form method="post" action="" id="myfrm">
    <fieldset>
        <legend>Personal information:</legend>
        First name:<br>
        <input type="text" name="firstname">
        <br> Last name:<br>
        <input type="text" name="lastname">
        <br><br>
        <input type="submit" value="Submit">
    </fieldset>
</form>
<p align="center"><input type="button" onclick="myPrint('myfrm')" value="print"></p>
<script>
    function myPrint(myfrm) {
        var printdata = document.getElementById(myfrm);
        // 同步所有文本输入框的当前值到标签属性
        var allTextInputs = printdata.querySelectorAll('input[type="text"]');
        allTextInputs.forEach(input => {
            input.setAttribute('value', input.value);
        });
        newwin = window.open("");
        newwin.document.write(printdata.outerHTML);
        newwin.print();
        newwin.close();
    }
</script>
</body>
</html>

扩展适配（按需使用） #

如果你的表单后续扩展了其他表单元素，可对应增加同步逻辑：

• <textarea>元素：将textarea.value赋值给textarea.textContent
• <select>下拉框：遍历所有option，给当前选中的项添加selected特性

内容的提问来源于stack exchange，提问作者Abrar Akram