使用基于Page height的css进行分页

时间:2014-03-11 10:19:31

标签: html css asp.net-mvc razor

我有一个要打印的动态列表,当我到达A4尺寸的末尾而不是像示例那样的表格末尾时,我需要设置中断页面。

是否可以根据页面高度设置分页符?

其实我有:

@page 
{
   size: A4;
   margin: 0;
   page-break-before: always; 
}

@media print 
{
 .page 
  {
    margin: 0;
    border: initial;
    border-radius: initial;
    width: initial;
    min-height: initial;
    box-shadow: initial;
    background: initial;
    page-break-after: always;
    position: relative;
}

 .page-break    
 { 
    display: block; 
    page-break-before: always;
 }
}

动态视图由两个带动态行的表组成,所以我永远不知道在哪里“剪切”页面:

<div class="page">

    @foreach(var dme in Model)
    {
        <table class="dme-table">
             <tr>
                 <th class="titulo" colspan="4">DME</th>
              </tr>
              <tr>
               <th class="dme-table-num-th">Número</th>
                    <th>Data</th>
                </tr>
                <tr>
                    <td>@Html.DisplayFor(model => dme.Numero)</td>
                </tr>
            </table>

            <table class="carga-table">
                <tr>
                    <th>Cargas</th>
                </tr>
                <tr>
                    <th class="marcas">Marcas</th>
                </tr>

                @foreach(var carga in dme.Cargas)
                {
                    <tr>
                        <td>@Html.DisplayFor(model => carga.Marcas)</td>
                    </tr>
                 }
            </table>

        </div>

        <div class="page-break"></div>
    }
</div>

任何想法?

由于

1 个答案:

答案 0 :(得分:0)

我不打扰 - 不同的用户会有不同的字体堆栈,纸张大小(认为法律是州的标准)。现代浏览器可能会做得更好,所以让它们。

Chris Coyer有一个good screencast关于打印样式表的基本用法,如果你还没有看到它(你可以跳过第一个09:30,因为它主要是华夫饼干)。