单页显示,多页打印问题

Question

网页显示以下内容: -

• 短发
• 弗雷德
• 约翰

然而,当用户(可能是我)打印网页时,我希望多次重复此输出,并在不同的页面上打印略有变化: -

• 短发
• 弗雷德
• 约翰

>page break here<

• 短发
• 弗雷德
• 约翰

>page break here<

• 短发
• 弗雷德
• 约翰

实际上页面内容较大(尽管在标准的A4页面内很好),输出页面的数量大约为20.我更喜欢优雅的跨浏览器解决方案,但最终可以使用适用于Internet Explorer 7的解决方案.

我正在使用带有jQuery的ASP.NET MVC(尽管直接的JavaScript解决方案很好).

编辑: Page-Break-XXX css样式将成为答案的一部分,但我特别感兴趣的是从屏幕版本动态创建打印版本HTML的方法.注意我不想导航到"打印机友好"页面然后打印它.我只想打开浏览器打印按钮并发生魔术.

Answer 1

好的,所以考虑到我的帖子的评论等类似的东西:

为了便于在此处显示,我正在使用页面样式,但您可以轻松使用离页引用.

声明以下样式:

<!-- media="print" means these styles will only be used by printing 
  devices -->
<style type="text/css" media="print">
    .printable{ 
      page-break-after: always;
    }
    .no_print{
      display: none;
    }
</style>
<!-- media="screen" means these styles will only be used by screen 
  devices (e.g. monitors) -->
<style type="text/css" media="screen">
    .printable{
      display: none;
    }
</style>
<!-- media types can be combined with commas to affect multiple devices -->
<style type="text/css" media="screen,print">
    h1{
      font-family: Arial, Helvetica, sans-serif;
      font-size: large;
      font-weight: bold;
    }
</style>

然后,你将需要做一些繁重的工作在你看来得到HTML寻找的东西是这样的:

<!-- Intial display for screen -->
<div class="no_print">
    <!-- Loop through users here using preferred looping/display method -->
    <ul>
        <li>Bob</li>
        <li>Fred</li>
        <li>John</li>
    </ul>
</div>
<!-- Now loop through each user, highlighting as you go, but for printer* -->
<div class="printable">
    <ul>
        <li><b>Bob</b></li>
        <li>Fred</li>
        <li>John</li>
    </ul>
</div>
<div class="printable">
    <ul>
        <li>Bob</li>
        <li><b>Fred</b></li>
        <li>John</li>
    </ul>
</div>
<div class="printable">
    <ul>
        <li>Bob</li>
        <li>Fred</li>
        <li><b>John</b></li>
    </ul>
</div>

现在为"适当的显示方法".

我刚刚开始使用MVC,所以你可能有更好的方法来做到这一点,但是现在我可能会使用像这样的RenderPartial方法:

<%
  /* 
  Using RenderPartial to render a usercontrol,
  we're passing in the Model here as the Model for the control, 
  depends on where you've stored your objects really, then we
  create a new anonymous type containing the properties we want
  to set.
  */

  // Display the main list
  Html.RenderPartial("~/Views/Shared/Controls/UserList.ascx",
      ViewData.Model, 
      new {HighlightUser = null, IsPrintable = false});

  // Loop through highlighting each user
  foreach (var user in ViewData.Model)
  {
    Html.RenderPartial("~/Views/Shared/Controls/UserList.ascx",
      ViewData.Model, 
      new {HighlightUser = user, IsPrintable = true});
  }
%>

然后,您的用户控件可以处理大部分显示,根据需要设置包含div的类(或您使用的任何元素),并根据传入的用户加粗用户 - 正如我所说,可能有更好的方法做部分的东西.

显然,你可能想要完全不同的用户渲染显示和打印 - 我猜你可能会添加相当多的jQuery善良隐藏和显示东西等,你实际上将在打印版本上显示,所以你可能需要两个不同的用户控件,然后可以放弃不传入IsPrintable属性.

而且,就目前而言,由于所有div上的"分页后"风格,这将在末尾打印一个空白页 - 你可能想要注意到你在最后一个div上,并且有一个不同的风格,除非你在最后一页上有你想要的信息.