Question

您好，我试图打印出包含模式中所有数据的模态，但我遇到了格式化问题。 Gridview被切断了，文本不是应该的样子。关于如何让它看起来更好的任何建议？

    <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>

Answer 1

您可以在printwindow页面上使用CSS，其中包含以下行：

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

使用您用于页面的任何CSS。

使用Gridview +格式打印模态

1 个答案: