4

列が私のWebページのページ幅を超えているため、スクロールを使用するグリッドビューを作成しています。問題は、印刷したいときに、表示されたデータのみを印刷することです。div または panel 内のすべてを印刷するにはどうすればよいですか?

GRIDVIEWの私のコード:

<a href="#" onclick="printPartOfPage('content-middle')" >PRINT ME </a>

<asp:Panel ID="gridPanel" runat="server" Height="500px" Width="980px" ScrollBars="Auto">


   <asp:GridView EnableSortingAndPagingCallbacks="true" Width="450px" 
            OnRowCreated="GridView1_RowCreated" runat="server" ID="GridView2" 
          CellPadding="4" ForeColor="#333333" GridLines="None" 
            >

                 <AlternatingRowStyle BackColor="White" ForeColor="#284775" />

                 <Columns>

                     <asp:HyperLinkField DataNavigateUrlFields="ID" 
                         DataNavigateUrlFormatString="updateAppointmentOperations.aspx?showID={0}" Text="Update " 
                         Target="_blank" />
                 </Columns>

                 <EditRowStyle BackColor="#999999" />
                 <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                 <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                 <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
                 <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
                 <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                 <SortedAscendingCellStyle BackColor="#E9E7E2" />
                 <SortedAscendingHeaderStyle BackColor="#506C8C" />
                 <SortedDescendingCellStyle BackColor="#FFFDF8" />
                 <SortedDescendingHeaderStyle BackColor="#6F8DAE" />

             </asp:GridView>

    </asp:Panel>

そして、私がインターネットから得たjavascriptプリントは次のとおりです。

<script type="text/javascript">

function printPartOfPage(elementId) {
    var printContent = document.getElementById(elementId);
    var windowUrl = 'about:blank';
    var uniqueName = new Date();
    var windowName = 'Print' + uniqueName.getTime();
    var printWindow = window.open(windowUrl, windowName, 'left=50000,top=50000,width=0,height=0');

    printWindow.document.write('<link rel="stylesheet" type="text/css" href="style/additional.css" /><link rel="stylesheet" type="text/css" href="style/default.css" /><link rel="stylesheet" type="text/css" href="style/hi-res.css" />' + printContent.innerHTML);
    printWindow.document.close();
    printWindow.focus();
    printWindow.print();
    printWindow.close();
}

gridview は、id content middle の div にあります。

ありがとうございました

4

3 に答える 3

3

ページに別のGridViewを含めることができます。これは、印刷にのみ使用されます。

どちらを表示するかを切り替える方法は、必要に応じて2つをCSSクラスで装飾することです。

例えば：

<style>
@media print {
    .PrintOnly { display:block; }
    .ScreenOnly { display:none; }
  }
  @media screen {
    .PrintOnly { display:none; }
    .ScreenOnly { display:block; }
  }
</style>
于 2012-03-19T19:43:33.250 に答える
1

これを行うにはいくつかの方法があります。おそらく最もユーザーフレンドリーなのは、cssを使用して、@mediaディレクティブを使用して表示と印刷にさまざまなスタイルを設定することです。dridPanelの高さと幅のプロパティを設定する代わりに、cssを使用して高さと幅を設定します-メディアが「画面」の場合は500と980、メディアが印刷される場合は幅を100％に設定します。（hdieghtをそのままにして、すべてを表示する必要があります）

@media cssディレクティブの詳細については、http ：//www.w3schools.com/CSS/css_mediatypes.aspを参照してください。

cssを使用してページをプリンターフレンドリーにするための優れた記事がここにあります：http ：//www.envisionic.com/webtips/user_experience/printer_friendly.php

于 2012-03-19T19:40:18.977 に答える