打印特定的div内容不显示javascript

Question

我想通过javascript打印特定的div。 打印时没有任何html标签，它工作正常。 但是当使用任何html标签，如p，h1或h2时，它是打印的空白页。

这是我的代码

    @extends('layout.master')
    @section('content')
    <div class="separator-breadcrumb border-top">
    </div>
    <div class="row">
         <div class="col-md-12">
              <div class="card">
                  <div class="card-header bg-secondary" style="padding: 7px 1.25rem">
                      <div class="row">
                          <div class="col-md-1">
                               <button onclick="printDiv('printMe')" class="btn btn-danger font-weight-700"> Print
                               </button>
                          </div>
                      </div>
                  </div>
                 <div id="printMe" >
                       <div class="card-body">
                          <h1>
                            Print this only
                          </h1>
                      </div>
                 </div>
              </div>
          </div>
       </div>
   @endsection
    @section('JScript')
      <script>
         function printDiv(divID) {
            var divElements = document.getElementById(divID).innerHTML;
        var oldPage = document.body.innerHTML;
        document.body.innerHTML = divElements;
        window.print();
        document.body.innerHTML = oldPage;
        }
      </script>
  @endsection

Answer 1

尝试格式化你的代码，使它不解析为HTML（用unicode＆lt;替换'<'结束标记字符，并将其放在一个

tag, to preserve white space:


// try changing from this :
var divElements = document.getElementById(divID).innerHTML;
var oldPage = document.body.innerHTML;
document.body.innerHTML = divElements;

// to this :
var divElements = document.getElementById(divID).innerHTML;
var oldPage = document.body.innerHTML;
document.body.innerHTML = '<pre>' + divElements.replace(/</g, '&lt;') + '</pre>';