如何使用window.print函数获取html内容以在内容预览上显示？

Question

我正在使用JavaScript的窗口打印功能来显示我的HTML内容。单击打印按钮后，我可以看到打印对话框正常，但我可以看到预览内容。它只是一直在加载预览。

HTML：

<div id="printArea">
  <table class="table table-bordered table-striped table-condensed table-hover clientTable">
    <thead>
      <th>Client Code</th>
      <th>Photo</th>
      <th>Name</th>
      <th>Gender</th>
      <th>Card Number</th>
      <th>Job</th>
      <th>Phone</th>
      <th>Action</th>
    </thead>
    <tbody>
      @forelse($listClient as $list)
      <tr>
        <td>{{ str_pad($list->id, 6, '0', STR_PAD_LEFT) }}</td>
        <td>
          <img class="listPhoto" src="{{ asset('data/client/'.$list->photo)}}">
        </td>
        <td>{{$list->client_name}}</td>
        <td>{{$list->gender}}</td>
        <td>{{$list->card_number}}</td>
        <td>{{$list->job}}</td>
        <td>{{$list->phone1}}</td>
        <td class="text-center">
          <a href="{{ url('client/detail/'.$list->id) }}" class="btn btn-info btn-xs"><i class="fa fa-search-minus"></i> Detail</a>
          <span class="pad-rl-5"></span>
          <a href="{{url('client/edit/'.$list->id)}}" class="btn btn-primary btn-xs"><i class="fa fa-pencil"></i> Edit</a>
          <span class="pad-rl-5"></span>
          @if($list->status ==0)
          <a href="{{url('client/enable/'.$list->id)}}" class="btn btn-success btn-xs"><i class="fa fa-check-circle"></i> Active</a>
          @else
          <a href="{{url('client/disable/'.$list->id)}}" class="btn btn-danger btn-xs"><i class="fa fa-times-circle"></i> Inactive</a>
          @endif
        </td>
      </tr>
      @empty
      <tr>
        <td colspan=8>No record found.</td>
      </tr>
      @endforelse
    </tbody>
  </table>
</div>

JavaScript的：

function printContent(printArea) {
  var printContents = document.getElementById("printArea").innerHTML;
  var originalContents = document.body.innerHTML;
  document.body.innerHTML = printContents;
  window.print();
  document.body.innerHTML = originalContents;
}

我想要的是在打印文档之前预览内容。

任何解决这个问题的想法都会非常感激。