单页显示,多页打印问题

网页显示以下内容: -

短发

弗雷德

约翰

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

短发

弗雷德

约翰

>page break here<

短发

弗雷德

约翰

>page break here<

短发

弗雷德

约翰

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

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

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

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

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

声明以下样式:

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

    
    

        
Bob
        
Fred
        
John
    



    

        
Bob
        
Fred
        
John
    


    

        
Bob
        
Fred
        
John
    


    

        
Bob
        
Fred
        
John
    

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

我刚刚开始使用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上,并且有一个不同的风格,除非你在最后一页上有你想要的信息.