如何将已嵌入的CSS包含到printData()jquery函数中?

时间:2017-02-28 21:48:53

标签: javascript jquery html css

我有一个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>

0 个答案:

没有答案