textarea内容打印不全问题求助（附实现代码）

问题根源 #

你当前的打印样式中，.acerto4设置了overflow: hidden，这会直接截断超出textarea高度的内容；同时textarea默认的打印样式可能存在高度限制，导致长文本无法完整展示。

解决方案 #

1. 修改打印样式

调整@media print中的规则，移除内容截断限制并让textarea自适应高度：

@media print {
  #btnPrintt1{
    display: none !important;
  }
  .acerto4{
    overflow: visible !important; /* 取消内容截断 */
    height: auto !important; /* 让高度自动适配内容 */
    white-space: pre-wrap !important; /* 保留文本中的换行和空格 */
    resize: none !important;
    border: none !important; /* 可选：移除打印时的边框，更美观 */
  }
  #printSection { 
    left:0 !important;
    top:0 !important;
    width: 100% !important;
  }
  .pagebreak { page-break-before: always; }
  /* 优化表单分页行为 */
  #comprovativo {
    page-break-inside: auto;
  }
  .form-group {
    page-break-inside: avoid; /* 避免单个表单组被分页截断 */
  }
}

2. 优化打印元素渲染（可选但更可靠）

由于textarea在部分浏览器的打印渲染中存在兼容性问题，可将打印时的textarea替换为div，确保文本完整展示：

document.getElementById("btnPrintt1").onclick = function () {
    printElement(document.getElementById("printThhis1")); 
}

function printElement(elem) {
    var domClone = elem.cloneNode(true);
    
    // 将所有目标textarea替换为div，保留内容和样式
    domClone.querySelectorAll('textarea.area').forEach(textarea => {
        const textDiv = document.createElement('div');
        textDiv.className = textarea.className;
        textDiv.style.whiteSpace = 'pre-wrap';
        textDiv.style.minHeight = textarea.style.height;
        textDiv.textContent = textarea.value;
        textarea.parentNode.replaceChild(textDiv, textarea);
    });
    
    var $printSection = document.getElementById("printSection");
    
    if (!$printSection) {
        var $printSection = document.createElement("div");
        $printSection.id = "printSection";
        document.body.appendChild($printSection);
    }
    $printSection.innerHTML = "";
    $printSection.appendChild(domClone);
    window.print();
}

说明 #

• 移除overflow: hidden是解决内容截断的核心，配合height: auto让textarea自动撑开以容纳全部文本。
• 替换为div打印的方案，能避免textarea在不同浏览器中打印样式的差异，确保长文本自动换行并跨页展示。

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