javascript打印窗口以页面为单位划分中继器输出

时间:2018-09-23 05:00:40

标签: javascript asp.net printing

我正在为我的学校开发学校管理系统。它在DotNetNuke下运行(我对此有一定的经验),因此该平台是asp.net,我使用C#开发。

该项目处于高级状态。我目前正在尝试为我开发的某些表编写打印功能。由于打印机输出必须转到连接到客户端的打印机,因此我必须使用javascript开发它。问题:我在javascript方面的经验有限,需要一些帮助。

我要打印的表格如下:Record book data。在使用sql服务器过程和C#代码进行了一些复杂的魔术之后,该表是使用嵌套的转发器创建的。 ascx文件中的代码如下:

<div id="RecordTable" style="@media print and (width:21cm) and (height:29.7cm) {@page {margin: 3cm;} } @page {size:A4 portrait; margin:10%;}" runat="server">
<asp:Repeater ID="StudentRepeater" OnItemDataBound="StudentRepeater_ItemDatabound" runat="server">
    <HeaderTemplate>
        <table>
    </HeaderTemplate>
    <ItemTemplate>
        <tr>
            <td style="padding-top: 15px; padding-bottom: 5px; font-size: 18px">Student: &nbsp &nbsp;</td>
            <td style="padding-top: 15px; padding-bottom: 5px; font-size: 18px"><%#Eval("DisplayNameEng") %></td>
            <td>
                <asp:HiddenField ID="hfStudentID" Value='<%#Eval("StudentID") %>' runat="server" />
            </td>
        </tr>
            <td style="padding-top: 2px; padding-bottom: 12px; font-size: 22px">សិស្ស &nbsp &nbsp;</td>
            <td style="padding-top: 2px; padding-bottom: 12px; font-size: 22px"><%#Eval("DisplayNameKhm") %></td>
            <td>&nbsp;</td>
        <tr>

        </tr>
        <tr>
            <td colspan="3">
                <asp:Repeater ID="CourseRepeater" runat="server">
                    <HeaderTemplate>
                        <table style="border-style: solid; padding: 5px">
                            <thead>
                                <tr>
                                    <th style="padding-left:9px; border-right:thin solid">Course</th>
                                    <th style="padding-right: 8px; padding-left:6px; border-right:thin solid" colspan="2">CW+Ex</th>
                                    <th style="padding-right: 20px; padding-left:6px; border-right:thin solid" colspan="2">Homew</th>
                                    <th style="padding-right: 12px;; padding-left:6px">Rank</th>
                                </tr>
                            </thead>
                            <tbody>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <tr>
                            <td style="font-size: 15px; padding-left: 10px; padding-right: 25px; padding-top:5px; border-right:thin solid"><%#Eval("Course") %></td>
                            <td style="font-size: 15px; text-align: right; padding-right: 12px; padding-left:7px"><%#Eval("CEAvg") %></td>
                            <td style="font-size: 15px; padding-left: 4px; padding-right: 18px; border-right:thin solid"><%#Eval("CEAss") %></td>
                            <td style="font-size: 15px; text-align: right; padding-right: 12px"><%#Eval("HWAvg") %></td>
                            <td style="font-size: 15px; padding-left: 4px; padding-right: 15px; border-right:thin solid"><%#Eval("HWAss") %></td>
                            <td style="font-size: 15px; text-align: right; padding-right: 12px;"><%#Eval("ScoreRank") %></td>
                        </tr>
                    </ItemTemplate>
                    <FooterTemplate>
                        </tbody>
                                <tfoot>
                                    <tr style="border-top: 1px solid">
                                        <td style="font-size: 15px; padding-left: 10px; padding-right: 12px; padding-top:5px; border-right:thin solid">
                                            Total</td>
                                        <td style="font-size: 15px; text-align: right; padding-right: 12px; padding-left:7px">
                                            <asp:Label ID="lblCETotal" runat="server" /></td>
                                        <td style="font-size: 15px; padding-left: 4px; padding-right: 12px; border-right:thin solid">
                                            <asp:Label ID="lblCETotalAss" runat="server" /></td>
                                        <td style="font-size: 15px; text-align: right; padding-right: 12px">
                                            <asp:Label ID="lblHWTotal" runat="server" /></td>
                                        <td style="font-size: 15px; padding-left: 4px; padding-right: 15px; border-right:thin solid">
                                            <asp:Label ID="lblHWTotalAss" runat="server" /></td>
                                        <td style="font-size: 15px; text-align: right; padding-right: 12px">
                                            <asp:Label ID="lblTotalRank" runat="server" /></td>
                                    </tr>
                                </tfoot>
                        </table>
                    </FooterTemplate>
                </asp:Repeater>
            </td>
        </tr>
    </ItemTemplate>
    <FooterTemplate>
        </table>            
    </FooterTemplate>
</asp:Repeater>

我不知道div标签的内联css样式是否可以工作,但是我计划在项目的这一部分完成后将所有内容移动到外部css文件中。现在这不是问题。

我想将此中继器输出发送到打印机。我已经使用了一些适用于另一个表的javascript代码:

<script type="text/javascript">
function printRecordbook() {
    var prntData = document.getElementById("<%=RecordTable.ClientID%>");
    var prntWindow = window.open("", "Print", "width=650,height=300,left=0,top=0,toolbar=0,scrollbar=0,status=0");
    prntWindow.document.writeln("<h1>Recordbook totals</h1>");
    prntWindow.document.writeln("<p>Period:  <%=drdownPeriod.SelectedItem%></p>");
    prntWindow.document.writeln("<p>Grade:  <%=drdownGrade.SelectedItem%></p>");
    prntWindow.document.write(prntData.outerHTML);
    prntWindow.document.close();
    prntWindow.focus();
    prntWindow.print();
    prntWindow.close();
}

问题是:保证另一张桌子的长度不超过1页(每名学生1行,大约15至25名学生)。当前表将跨越几页,我希望将每个学生的数据保存在一起。

我正在家里开发,没有打印机可以测试结果。我需要一些建议,如何将外部中继器的每一项保持在一起-以及如何在除第一个外的所有页面上制作一个页面标题。

0 个答案:

没有答案