2017-04-13 3 views
0

こんにちは、私はモーダルのすべてのデータでモーダルを印刷しようとしていますが、フォーマットに問題があります。 Gridviewは終了し、テキストはそうではありません。それをより良く見えるようにするためのアドバイスはありますか?Gridview +フォーマットでモーダルを印刷する

printWindow.document.write('<link href="/css/style.css" rel="stylesheet" />');

使用ページに使用どんなCSS:あなたは次の行にprintwindowページにCSSを使用することができます

enter image description here enter image description here

<script type="text/javascript"> 
    function PrintContent() { 

     var panel = document.getElementById("SummaryModal"); 
     var printWindow = window.open('', '', 'height=400,width=800'); 
     printWindow.document.write('<html><head><title>Trip Summary</title>'); 
     printWindow.document.write('</head><body >'); 
     printWindow.document.write(panel.innerHTML); 
     printWindow.document.write('</body></html>'); 
     printWindow.document.close(); 
     setTimeout(function() { 
      printWindow.print(); 
     }, 500); 
     return false; 
    } 
</script> 

<div id="SummaryModal" class="modal fade" role="dialog"> 
       <div class="modal-dialog" style="width: 80%"> 
        <div class="modal-content"> 
         <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal">&times;</button> 
          <h4>Trip Summary</h4> 
         </div> 
         <div class="modal-body"> 
          <div class="row"> 
           <div class="col-md-4"> 
            <div class="form-group"> 
             <label for="lblDate">Date:</label> 
             <div class="input-group" style="width: 100%"> 
              <asp:Label runat="server" ID="lblDate"></asp:Label> 
             </div> 
            </div> 
           </div> 
           <div class="col-md-4"> 
            <div class="form-group"> 
             <label for="lblVolunteer">Volunteer Assigned:</label> 
             <div class="input-group" style="width: 100%"> 
              <asp:Label runat="server" ID="lblVolunteer"></asp:Label> 
             </div> 
            </div> 
           </div> 
           <div class="col-md-4"> 
            <div class="form-group"> 
             <label for="lblStartingAddress">Starting Address:</label> 
             <div class="input-group" style="width: 100%"> 
              <asp:Label runat="server" ID="lblStartingAddress"></asp:Label> 
             </div> 
            </div> 
           </div> 
          </div> 
          <div class="row"> 
           <div class="col-md-4"> 
            <div class="form-group"> 
             <label for="lblNumBoxes">Number Of Boxes:</label> 
             <div class="input-group" style="width: 100%"> 
              <asp:Label runat="server" ID="lblNumBoxes"></asp:Label> 
             </div> 
            </div> 
           </div> 
           <div class="col-md-4"> 
            <div class="form-group"> 
             <label for="lblHasFood">Trip has food?</label> 
             <div class="input-group" style="width: 100%"> 
              <asp:Label runat="server" ID="lblHasFood"></asp:Label> 
             </div> 
            </div> 
           </div> 
           <div class="col-md-4"> 
            <div class="form-group"> 
             <label for="lblTotalTripTime">Total Trip Time:</label> 
             <div class="input-group" style="width: 100%"> 
              <asp:Label runat="server" ID="lblTotalTripTime"> 2 hours and 30 minutes </asp:Label> 
             </div> 
            </div> 
           </div> 
          </div> 
          <div class="row"> 
           <div class="col-md-4"> 
            <div class="form-group"> 
             <label for="GVSummary">List of Destinations:</label> 
            </div> 
           </div> 
           <div class="col-md-3 col-md-offset-9"> 
            <a href="#" id="btnPrint" class="btn btn-success btn-sm pull-right"> 
             <span style="width: 3.5em;" onclick="PrintContent()" title="Print Trip Summary" data-toggle="tooltip" class="glyphicon glyphicon-print"></span>Print Summary 


             <%--<asp:LinkButton 
              Style="width: 3.5em;" OnClick="btnPrint1_Click" runat="server" title="Print Trip Summary" data-toggle="tooltip" class="glyphicon glyphicon-print">Print Summary 
             </asp:LinkButton>--%> 
            </a> 

           </div> 
          </div> 
          <br /> 

          <div class="row"> 
           <div class="container-fluid"> 

            <div style="overflow-x: scroll; overflow-y: scroll"> 
             <asp:GridView ID="GVSummary" runat="server" Style="overflow-x: scroll; overflow-y: scroll" CssClass="table table-responsive table-bordered" AutoGenerateColumns="false"> 
              <Columns> 
               <asp:BoundField DataField="DestName" HeaderText="Name" /> 
               <asp:BoundField DataField="isPickup" HeaderText="Pick Up or Delivery" /> 
               <asp:BoundField DataField="Address1" HeaderText="Address 1" /> 
               <asp:BoundField DataField="Address2" HeaderText="Address 2" /> 
               <asp:BoundField DataField="City" HeaderText="City" /> 
               <asp:BoundField DataField="State" HeaderText="State" /> 
               <asp:BoundField DataField="ZipCode" HeaderText="Zip Code" /> 
               <asp:BoundField DataField="RegionName" HeaderText="Region" /> 
               <asp:BoundField DataField="DestinationPriority" HeaderText="Priority" /> 
               <asp:BoundField DataField="DesTime" HeaderText="Travel Time" /> 
               <asp:BoundField DataField="isScheduled" HeaderText="Recurring" /> 
               <asp:BoundField DataField="DesNotes" HeaderText="Notes" /> 
               <%-- <asp:BoundField DataField="DesNotes" HeaderText="Notes" /> 
               <asp:BoundField DataField="isFood" HeaderText="Notes" /> 
               <asp:BoundField DataField="BoxesNumber" HeaderText="Notes" /> 
               <asp:BoundField DataField="DesTime" HeaderText="Notes" /> 
               <asp:BoundField DataField="DesNotes" HeaderText="Notes" /> 
               <asp:BoundField DataField="DesNotes" HeaderText="Notes" />--%> 
              </Columns> 
             </asp:GridView> 
            </div> 
           </div> 
          </div> 
         </div> 
         <div class="modal-footer"> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

答えて

関連する問題