Как я могу напечатать этот div с перетаскиванием объектов?

Я могу напечатать это, но вывод неправильный. Это мой скрипт для печати:

<script type="text/javascript">
function printDiv(divName)
{
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>

И это для просмотра:

<div class="accordion-body collapse in body" id="printableArea">
<div class="col-lg-12">
<span class="text-left"><h4><b>Course Code-Section: </b><?php echo $class;?></h4></span>
<span class="text-left"><h4><b>Course Description: </b><?php echo $description;?></h4></span>
<span class="text-left"><h4><b>School Year-Semester: </b><?php echo $schoolyearsemester;?></h4></span>
<span class="text-left"><h4><b>Day-Time: </b><?php echo $daytime;?></h4></span>
<span class="text-left"><h4><b>Room: </b><?php echo $room;?></h4></span>
<br>
</div>

<ul class="draglist" style="width:{{config.width * config.col}}px;" ng-cloak>
<li ng-repeat="obj in chairs" ng-drop="false" ng-drop-success="onDropComplete($index, $data,$event)" ng-cloak>
<div ng-drag="false" ng-drag-data="obj" ng-class="obj" ng-cloak>
<span class="student-name">{{obj.length > 3 ? obj: ''}}</span>
</div>
</li>
</ul>

<div class="form-actions">
<h3 class="text-center">Professor's Table</h3>
</div>

</div>
<input type="button" onclick="printDiv('printableArea')" value="Print Seatplan" />

И это изображение или вывод, который отображает:

И это тот, который я печатаю, план места перетаскивания: