我有一个printData()函数,当我点击一个Button时它工作正常,它正在从我的页面直接打印整个表,但它没有任何CSS。
我可以,如何从页面中包含已嵌入的CSS?或者我可以在完全相同的CSS中打印表格吗?
我附上了我的代码段,以便更容易理解。
/* Print button to print */
function printData()
{
var divToPrint=document.getElementById("ReservationDetailTable");
newWin= window.open("");
newWin.document.write(divToPrint.outerHTML);
newWin.print();
newWin.close();
}
$('#ReservationDetailPrint').on('click',function(){
printData();
})
/* Below to hide the content of Reservation Detail Table */
/* sort out the second table TH of joining Guest probably prevent the hide */
$(function () {
var tableBody = $("#ReservationListDetail_tbody"),
tableHead = $("#ReservationListDetail_thead");
tableHead.on("click", function () {
tableBody.slideToggle("slow");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<table class="table table-responsive table-fixed table-fixedResList" id="ReservationDetailTable">
<thead class="thead" id="ReservationListDetail_thead">
<tr class="">
<th style="width:20%;">Primary Guest</th>
<th style="width:80%;">Info <span class="btn btn-primary btn-sm pull-right">click here to expand</span></th>
</tr>
</thead>
<tbody id="ReservationListDetail_tbody">
<tr>
<td rowspan="8">
<div class="card" style="width: 20rem; border-style: solid; border-color: #ffffff;">
<img class="card-img-top img-circle" src="./assets/img/3.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Mark Meyer</h4>
<p class="card-text">Cabin 23412</p>
<a href="#" class="btn btn-info">EDIT</a>
<button class="btn btn-info" id="ReservationDetailPrint">Print</button>
</div>
</div>
</td>
<td id="TableReservationList_ResID">
<label>Reservation ID</label>
<table class="table table-responsiv table-hover" id="ReservationList_ResIDLocation">
<thead>
<tr>
<th style="width: 50%;">
<h4 id="ReservationResID">31294833</h4>
</th>
<th style="width: 50%;">
<h4 id="ReservationResBookLocation">Precruise</h4>
</th>
</tr>
</thead>
</table>
</td>
</tr>
<tr>
<td id="TableReservationList_ReservationDate">
<label>Reservation Date</label>
<table class="table table-responsiv table-hover" id="ReservationList_DateTime">
<thead>
<tr>
<th style="width: 50%;">
<h4 id="ReservationResDate">20th January 2017</h4>
</th>
<th style="width: 50%;">
<h4 id="ReservationResTime">6:30 PM</h4>
</th>
</tr>
</thead>
</table>
</td>
</tr>
<tr>
<td id="TableReservationList_Status">
<table class="table table-sm table-responsiv table-hover" id="ReservationListResStatus">
<thead>
<tr>
<th>Status</th>
<th>Preassigned Table</th>
<th>Assigned Table(s)</th>
</tr>
</thead>
<tbody>
<tr>
<td>PARTIAL</td>
<td>201</td>
<td>124</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td id="TableReservationList_JoiningGuestStatus">
<label>Guests Associated</label>
<table class="table table-sm table-responsiv table-hover" id="ReservationListjoiningGuest">
<thead class="thead-inverse">
<tr>
<th>Cabin</th>
<th>Name</th>
<th>Status</th>
<th>Nationality</th>
<th>Age</th>
<th>Special Request</th>
<th>Birthday Today</th>
</tr>
</thead>
<tbody>
<tr>
<td>21453</td>
<td>Mark Jacobs</td>
<td>Expected</td>
<td>English</td>
<td>32</td>
<td>YES</td>
<td>No</td>
</tr>
<tr>
<td>12453</td>
<td>John Meyer</td>
<td>Inhouse</td>
<td>English</td>
<td>32</td>
<td>YES</td>
<td>No</td>
</tr>
<tr>
<td>24135</td>
<td>Julia Hammond</td>
<td>Cancelled</td>
<td>English</td>
<td>32</td>
<td>YES</td>
<td>No</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td id="TableReservationList_Special_Request">
<label>Special Requests</label>
<table class="table table-sm table-responsiv table-hover" id="ReservationListSpecialRequest">
<thead class="thead-inverse">
<tr>
<th>Cabin</th>
<th>Name</th>
<th>Status</th>
<th>Request Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>21453</td>
<td>Mark Jacobs</td>
<td>Due</td>
<td>Gluten Free</td>
</tr>
<tr>
<td>12453</td>
<td>John Meyer</td>
<td>Due</td>
<td>Guest need Special Assistant</td>
</tr>
<tr>
<td>24135</td>
<td>Julia Hammond</td>
<td>Delievered</td>
<td>Guest require Bottle Champaign</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td id="TableReservationList_DateofBirth">
<label>Birthdays in this Reservation</label>
<table class="table table-sm table-responsiv table-hover" id="ReservationListBirthday">
<thead class="thead-inverse">
<tr>
<th>Cabin</th>
<th>Name</th>
<th>Gender</th>
<th>Nationality</th>
<th>Day of Birthday</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>21453</td>
<td>Mark Jacobs</td>
<td>Male</td>
<td>English</td>
<td>12th November 19856</td>
<td>32</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td id="TableReservationList_Status">
<label>Reservation Notes / Comments</label>
</td>
</tr>
<tr>
<td id="TableReservationList_BookedBy">
<label>Booked By</label>
<h4 id="ReservationResBookdBy">User Manfred @ 12th December 2016 2:03:34 PM</h4>
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>