打印特定的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>';