Javascript 使用Gridview打印模式+；格式化
您好，我正试图打印出一个包含模式中所有数据的模式，但是我遇到了格式问题。Gridview被截断，文本不是它应该的样子。关于如何使它看起来更好，有什么建议吗Javascript 使用Gridview打印模式+；格式化,javascript,html,asp.net,bootstrap-modal,Javascript,Html,Asp.net,Bootstrap Modal,您好，我正试图打印出一个包含模式中所有数据的模式，但是我遇到了格式问题。Gridview被截断，文本不是它应该的样子。关于如何使它看起来更好，有什么建议吗 函数PrintContent（）{ var panel=document.getElementById（“SummaryModal”）； var printWindow=window.open（“”，’高度=400，宽度=800’）； printWindow.document.write（‘行程汇总’）； printWindow.doc
函数PrintContent（）{
var panel=document.getElementById（“SummaryModal”）；
var printWindow=window.open（“”，’高度=400，宽度=800’）；
printWindow.document.write（‘行程汇总’）；
printWindow.document.write（“”）；
printWindow.document.write（panel.innerHTML）；
printWindow.document.write（“”）；
printWindow.document.close（）；
setTimeout（函数（）{
printWindow.print（）；
}, 500);
返回false；
}
&时代；
行程摘要
日期：
printWindow.document.write（“”）
使用您在页面中使用的任何CSS
<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">×</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>