求助：无法打印页面输入框内容与静态文本，求解决方案

看起来你是想打印printable-consent区域里的内容，但始终没法正常实现对吧？我结合你的代码片段给你梳理几个关键问题和解决方案：

1. 先确认你的printDiv()函数是否正确 #

你给输入框绑定了onkeyup="printDiv()"，但如果这个函数逻辑有问题，肯定没法正常打印。先给你一个标准的打印指定区域的函数实现：

function printDiv() {
    // 获取目标打印区域
    const printArea = document.getElementById('printable-consent');
    // 新建打印窗口
    const printWindow = window.open('', '', 'width=800,height=600');
    
    // 写入打印内容，别忘了带样式！
    printWindow.document.write(`
        <html>
        <head>
            <title>患者同意书打印</title>
            <!-- 引入原页面的CSS，比如你用的Bootstrap -->
            <link rel="stylesheet" href="path/to/your/bootstrap.css" type="text/css">
        </head>
        <body>${printArea.innerHTML}</body>
        </html>
    `);
    
    printWindow.document.close();
    // 等待内容加载完成后触发打印
    printWindow.onload = () => {
        printWindow.print();
        printWindow.close();
    };
}

2. 最常见的坑：输入框内容不显示在打印预览里 #

浏览器默认不会把用户输入的内容同步到innerHTML里，所以直接打印的话，输入框可能是空的。解决这个问题需要在打印前手动同步输入值：

function printDiv() {
    // 先同步所有输入框的用户输入到DOM属性
    const inputs = document.querySelectorAll('#printable-consent input');
    inputs.forEach(input => {
        input.setAttribute('value', input.value);
    });
    
    // 后面的打印逻辑和上面一致
    const printArea = document.getElementById('printable-consent');
    const printWindow = window.open('', '', 'width=800,height=600');
    
    printWindow.document.write(`
        <html>
        <head>
            <title>患者同意书打印</title>
            <link rel="stylesheet" href="path/to/your/bootstrap.css" type="text/css">
        </head>
        <body>${printArea.innerHTML}</body>
        </html>
    `);
    
    printWindow.document.close();
    printWindow.onload = () => {
        printWindow.print();
        printWindow.close();
    };
}

3. 优化体验的小建议 #

• 别用onkeyup触发打印：用户输入时频繁触发打印体验太差，建议加个专门的打印按钮：

  <div class="modal-footer">
      <button onclick="printDiv()" class="btn btn-success">打印同意书</button>
  </div>
  

• 不用弹窗的打印方式：可以用CSS媒体查询控制打印样式，直接用浏览器原生打印：

  @media print {
      /* 隐藏页面其他内容 */
      body * {
          visibility: hidden;
      }
      /* 只显示打印区域 */
      #printable-consent, #printable-consent * {
          visibility: visible;
      }
      #printable-consent {
          position: absolute;
          left: 0;
          top: 0;
      }
  }
  

  对应的打印函数简化成：

  function printDiv() {
      // 同步输入值
      const inputs = document.querySelectorAll('#printable-consent input');
      inputs.forEach(input => {
          input.setAttribute('value', input.value);
      });
      window.print();
  }
  

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