从文本区域打印全文答案

【问题标题】：Print full text from a textarea从文本区域打印全文
【发布时间】：2022-07-23 00:46:34
【问题描述】：

我正在打印一个表格。我遇到的问题是当 textarea 字段的文本很大时，打印时它不会打印整个文本。我有以下代码来创建表单并打印：

success: function(result){
  $.ajax({  
        url:"comp_den.php",  
        method:"POST",
        cache: false,                           
        dataType:"json",  
        success:function(data){
                  
            $(".insdenuncia").click(function(){
                $("#s1").hide();
            });
            $(".insdenuncia").click(function(){
                $("#s2").show();
            });
                  
            var linha = ``;

            for (var i = 0; i < data.length; i++) {
        Denuncia = data[i][3];
        
        linha += `<div class="form-group form-message">
                                <textarea class="form-control acerto2 acerto4 area">${Denuncia}</textarea>
                                <label class="acerto2">Digite a sua denúncia</label>
                                </div>`;
                  } 


                  $('#s1').hide();
                  $('#s2').show();
                  $("#comprovativo").html(linha);
                  
                  $(document)
                      .on('keyup input keypress keydown change', '.area', function(e) {
                      var tamanhoMin =  $(this).attr('rows') * $(this).css('line-height').replace(/[^0-9\.]+/g, '');

                      var novoTamanho = this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth"));
                      if (tamanhoMin > novoTamanho) novoTamanho = tamanhoMin;
                      $(this).css({'height': novoTamanho});
                  });

                  $(".area")
                      .delay(0)
                      .show(0, function() {
                      var el = $(this);
                      setTimeout(function () {
                          el.trigger('keyup');
                      }, 100);        
                  });

              }

document.getElementById("btnPrintt1").onclick = function () {
        printElement(document.getElementById("printThhis1")); 
    }
    
    function printElement(elem) {
    
        var domClone = elem.cloneNode(true);
        
        var $printSection = document.getElementById("printSection");
        
        if (!$printSection) {
            var $printSection = document.createElement("div");
            $printSection.id = "printSection";
            document.body.appendChild($printSection);
        }
        console.log($printSection);
        $printSection.innerHTML = "";
        $printSection.appendChild(domClone);
        window.print();
    
    }

@media screen {
  #printSection {
    display: none !important;
  }       
}

@media print {
  #btnPrintt1{
  display: none !important;
  }
  .acerto4{
    overflow: hidden;
  }
  #printSection { 
    left:0 !important;
    top:0 !important;
  }
  .pagebreak { page-break-before: always; }
}

<form class="main__form" role="form" id="comprovativo">

</form>
<div class="text-center" style="margin-top: 4%;">
  <button type="button" class=" btn btn-get" id="btnPrintt1"><span><i class="pe-7s-print"></i> Comprovativo</span></button>
</div>

我已经把滚动条隐藏了，但是如果打印时文字很大，在一定高度之后文字就隐藏了。你能帮忙吗？

【问题讨论】：

一个简单的解决方案是在 jquery 中将 textarea 中的文本放入 div 中，然后删除 textarea。
为什么你的 JS sn-p 不完整success: function(result){。您能否创建一个minimal reproducible example - 如果相关？

标签： javascript html jquery css

【解决方案1】：

为什么要尝试打印文本区域？它并不是为此而构建的。相反，可以将相同的内容放在<p> 标签中，然后切换使用 CSS 显示的内容，具体取决于屏幕还是打印？如果需要，您甚至可以设置 <p> 的样式，使其看起来像一个表单输入。

@media screen {
  .toPrint {
    display: none;
  }
}

@media print {
  .notToPrint {
    display: none;
  }
  
  .toPrint {
    display: block;
  }
}

<textarea class="form-control acerto2 acerto4 area notToPrint">${Denuncia}</textarea>
<p class="toPrint">${Denuncia}</p>

【讨论】：