Javascript 单页显示、多页打印问题

网页将显示以下内容：-

• 鲍勃
• 弗雷德
• 约翰

但是，当用户（即我）打印网页时，我希望在单独的页面上重复多次此输出，但略有变化：-

• Bob
• 弗雷德
• 约翰

---

>此处分页符此处分页符我不确定您是否可以通过CSS完成所有操作，但这里有一些方法可以帮助您开始

要在打印时在CSS中获得分页符，请使用以下选项之一：





这些值包括：

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元素）。使用主样式表隐藏容器，并为打印介质创建单独的样式表。在这个新的样式表中，显示容器元素，隐藏旧的元素以及您不希望打印的任何内容

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

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

编辑：
当您使用jQuery时，我将使用

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

好的，考虑到我的帖子的评论等，如下所示：

<!-- 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>

<%
  /* 
  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});
  }
%>

为了便于在这里显示，我使用了页内样式，但您可以轻松地使用页外引用

声明以下样式：

<!-- 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>


.printable{
分页符后：始终；
}
.无印{
显示：无；
}
.可打印{
显示：无；
}
h1{
字体系列：Arial、Helvetica、无衬线字体；
字体大小：大号；
字体大小：粗体；
}

然后，您需要在视图中执行一些繁重的操作，以使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>

<%
  /* 
  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});
  }
%>



鲍勃
弗雷德
约翰


鲍勃
弗雷德
约翰


鲍勃
弗雷德
约翰


鲍勃
弗雷德
约翰


现在是“适当的显示方法”

我刚刚开始使用MVC，所以您可能已经有了更好的方法，但现在我可能会使用如下RenderPartial方法：

<!-- 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>

<%
  /* 
  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上，并且在该div上有不同的样式，除非您在最后一页上有您想要的信息。
Zhaph，谢谢您的输入，但我不想导航到打印页。我想要一个单独的页面，在屏幕上有一种外观，在打印中有另一种外观。page-break-xxxx肯定是答案的一部分，但它会生成我感兴趣的屏幕html的“不完全重复”副本。这就是它变得棘手的地方。显然，使用media=“print”可以覆盖打印机的屏幕样式，但我不确定是否可以重复页面的元素，但每次都有所不同。有一些方法可以在css中生成内容，例如，在打印页面上使用一点JS自动启动打印对话框可以减少鼠标点击，但我猜主要是重复您反对的视图？浏览器的打印按钮工作得很好，在IE中，您不必为关闭对话框而烦恼。在我发布此消息之后，我不确定我是否应该编辑我以前的答案，没有真正澄清。如果有人反对，我很乐意合并他们并删除这个。我已经从你的另一个答案中删除了我的+1，所以你可以删除它并保留这个。出于其他原因，我决定保留决定谁在控制器中获取副本的逻辑。因此，这个答案非常接近我所需要的。谢谢您可以尝试以下方法：$（'.printable:last child'）.css（'page-break-after'，'avoid'）；不知道该属性是否会在之后分页符。