javascript window.print()无法打印完整的网格

时间:2015-02-26 11:21:55

标签: javascript c# css asp.net

我想打印gridview控件中包含的asp:Panel控件。我的网格视图有50多列。我正在尝试使用asp:Panel方法打印此window.Print() javascript。我也使用print.css文件打印此页面。 print.css代码:

body, html {
   height: 100%; width:100%;
}
#wrapper {
  width: 100% !important;
    height: 100% !important;
  overflow: auto !important;      
}


@media print {
      body, html {
          width: 100%;height:100%
      }
}

.aspx code

<div >
        <asp:TextBox ID="txtQuery" runat="server" TextMode="MultiLine" Width="690px"></asp:TextBox>
        <br />
        <asp:Button ID="btnExecute" runat="server" OnClick="btnExecute_Click" Text="Execute" />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:Button ID="btnPrintCurrentPage" runat="server" Text="Print Current Page" 
            OnClientClick="PrintGridData()" Enabled="False" />
        <div class="mainPrint" id="wrapper">
            <asp:Panel ID="pnlResult" runat="server"  ScrollBars="Both" >
                <asp:GridView ID="gvResult" runat="server" Font-Size="X-Small" CellPadding="4" AutoGenerateColumns="true"
                    AllowPaging ="True" PageSize="50" ForeColor="Black" 
                    OnPageIndexChanging = "OnPaging" BackColor="#CCCCCC" BorderColor="#999999" 
                    BorderStyle="Solid" BorderWidth="1px" CellSpacing="0"
                    onrowdatabound="gvResult_RowDataBound">
                    <FooterStyle BackColor="#990000" Font-Bold="True" />
                    <HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
                    <PagerStyle BackColor="#CCCCCC" ForeColor="#333333" HorizontalAlign="Left" />
                    <RowStyle BackColor="White" />
                    <SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="Navy" />
                    <SortedAscendingCellStyle BackColor="#FDF5AC" />
                    <SortedAscendingHeaderStyle BackColor="#808080" />
                    <SortedDescendingCellStyle BackColor="#FCF6C0" />
                    <SortedDescendingHeaderStyle BackColor="#383838" />
                </asp:GridView>
            </asp:Panel>
        </div>
    </div>

填充gridview后,有50多列,点击打印后会打印一些列并截断其余列。请指导我出错的地方。

谢谢!

1 个答案:

答案 0 :(得分:0)

您想将CSS table-layout: fixed;应用于GridView。然后,您可以根据需要控制列宽,而不是将其留在浏览器中以找出(并出错)。所以你需要上课,我通常做这样的事情:

.fixedLayout {
    table-layout: fixed;
    font-size: 11px;
}

然后

<asp:GridView ID="gvResult" CssClass="fixedLayout" ...>

您可以使用RowCreated事件轻松应用代码中的列宽,例如:

protected void MyGridView_RowCreated(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.Header || e.Row.RowType == DataControlRowType.DataRow)
    {
        foreach (DataControlFieldCell dc in e.Row.Cells)
        {
            switch (dc.ContainingField.ToString())
            {
                case ("Column1"):
                    dc.Width = 100;
                    dc.HorizontalAlign = HorizontalAlign.Right;
                    break;
                case ("Column2"):
                case ("Column3"):
                    dc.Width = 50;
                    break;
                case ("Column4"):
                    dc.Width = 215;
                    break;
            }
        }
    }
}

使用table-layout: fixed;还具有以下优势:可以更快地呈现到屏幕,因为浏览器不会尝试计算单元格大小。