单页显示,多页打印问题

好吧,考虑到我的帖子中的评论等,如下所示:

为了便于在这里显示,我使用的是页面上的样式,但是您可以很容易地使用页面外的引用。

声明以下样式:

<!-- 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,所以你可能有更好的方法,但现在我可能会使用这样的渲染方法:

<%
  /* 
  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 good隐藏和显示等内容,实际上您将在打印版本上显示,因此您可能需要两个不同的用户控件,然后可以避免传递可打印属性。

另外,正如它所显示的,这将在结尾处打印一个空白页,因为在所有分区上都有“后分页符”样式-您可能希望注意到您在最后一个分区上,并且在该分区上有一个不同的样式,除非您在最后一页上有您想要的信息。

我不确定你是否可以通过CSS来完成这一切,但这里有一些可以让你开始。

要在打印时在CSS中获取分页符,请使用以下方法之一:

• page-break-before
• page-break-after

这些价值观包括:

auto   // Default. Insert a page break before/after the element if necessary
always // Insert a page break before/after the element
avoid  // Avoid inserting a page break before/after the element
left   // Insert page breaks before/after the element until it reaches a blank left page
right  // Insert page breaks before/after the element until it reaches a blank right page

如果您准备好了某种“打印”页面,该页面根据需要列出信息,并在重复的元素上使用这些样式,那么您应该可以继续使用。

您需要通过javascript来完成这一切,创建一个打印链接,当单击它时调用window.print()。

但是,在这个调用之前,创建您想要的输出,并将其放入一个单独的容器(DIV,SPAN,任何支持您要放置在其中的标记的HTML元素)。使用主样式表隐藏容器,并为打印介质创建单独的样式表。在这个新样式表中,显示容器元素并隐藏旧元素以及您不希望打印的任何其他元素。

如果以后要清理页面,请使用set interval设置一个间隔,以清除不需要的容器。我不会在调用window.print()后立即执行此操作,因为我认为打印机不会接受HTML更改,但是快速测试会告诉您其他情况。

如果有一种方法可以使用JavaScript来监听页面的打印,那么您也可以连接它。

编辑: 当您使用jquery时,我将使用

$('#listID').clone().appendTo('#hiddencontainer')

Clone documentation