Single-page-Anzeige, multi-page print problem

Ok, also unter Berücksichtigung der Kommentare etc auf mein post so etwas wie dieses:

Für die einfache Anzeige hier, ich bin auf der Seite styles, aber Sie können leicht mit off-page-Referenzen.

Deklarieren die folgenden Stile:

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

Dann, sind Sie gehen zu müssen, tun Sie etwas schweres heben in Ihren anzeigen, um HTML suchen etwas wie diese:

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

Nun für eine "angemessene display-Methode".

Ich fange gerade mit MVC, so haben Sie wahrscheinlich eine bessere Methode, dies zu tun, aber für jetzt, ich würde wahrscheinlich verwenden eine Methode RenderPartial wie diese:

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

Ihre Benutzer-Steuerelement kann dann handhaben den Großteil des Displays, Einstellung der Klasse des übergeordneten divs (oder was auch immer element, das Sie verwenden) und Fettformatierung bis der Benutzer auf der Grundlage der übergebenen - wie ich schon sagte, gibt es möglicherweise einen besseren Weg zu tun, die teilweise Zeug.

Natürlich, werden Sie wahrscheinlich wollen völlig andere rendering der Benutzer zum anzeigen und drucken - ich denke, du bist wahrscheinlich hinzufügen ein bisschen jQuery Güte ausblenden und anzeigen von Sachen, etc, Sie sind eigentlich Los, um die Anzeige auf die gedruckte version, so dass Sie wahrscheinlich wollen zwei verschiedene Benutzer-Steuerelemente, und kann dann Weg, mit nicht vorbei an der IsPrintable Eigenschaft.

Auch, wie es steht, dies wird drucken Sie eine leere Seite am Ende, aufgrund der "page-break-after" - Stil auf alle divs - du würdest vielleicht möchten beachten Sie, dass Sie auf der letzten div, und haben einen anderen Stil auf, dass, es sei denn, Sie haben Informationen, die Sie möchten, auf die Letzte Seite.

Sie tun müssen, wird alles über JavaScript, erstellen Sie eine Druck-link, der beim anklicken ruft das Fenster.drucken Sie().

Jedoch vor, die aufgerufen wird, erstellen Sie die Ausgabe, die Sie wollen, und legen Sie Sie in einen separaten container (div, span, jedes beliebige html-element unterstützt, dass die tags, die Sie gehen, um innerhalb es). Verstecken Sie den Behälter mit Ihrem Haupt-stylesheet, und erstellen Sie ein separates stylesheet für print-Medien. Innerhalb dieser neuen stylesheet zeigen Sie das container-element und verstecken die alten Elemente und alles, was, die Sie nicht drucken möchten.

Wenn Sie möchten, zu bereinigen, die Seite danach dann ein Intervall festlegen, mit SetInterval klar, bis die unerwünschte container. Ich würde es nicht tun, unmittelbar nach dem Aufruf-Fenster.print (), weil ich mir den Drucker nicht abholen auf der HTML-änderungen, aber eine quick-test wird Ihnen sagen, sonst.

Wenn es ein Weg des Zuhörens, die für einen Druck von Ihrer Seite mit javascript-dann könnten Sie hook up, wie gut.

Edit:
Wie Sie mit jQuery würde ich clone die original-Liste mit

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

Klon-Dokumentation