it-swarm.com.de

Drucken Sie sich wiederholende Kopfzeilen in Chrome

Hat jemand einen Link zu einem Artikel oder Funktionsbeispiel für sich wiederholende Seitenkopfzeilen/Fußzeilen speziell von Chrome?

Hintergrund:
Ich habe tagelang damit verbracht, ohne Erfolg, es gibt mehrere Lösungsvorschläge für Stacks, aber scheinbar keine (in Chrome). Da wir bei der Arbeit mit Chrome gearbeitet haben, habe ich nur dort getestet. Daher sagen viele unten, dass Chrome es einfach nicht kann, aber vielleicht habe ich etwas übersehen?

Ich habe diese Stack-Links ausprobiert (..und viele mehr):

Fußzeile auf jeder gedruckten Seite der Website in allen Browsern drucken (Chrome)

Gibt es eine Möglichkeit, auf jeder Seite eine Kopf Fußzeile für Webseiten zu drucken? - /

Wie verwende ich HTML, um Kopf- und Fußzeilen auf jeder gedruckten Seite eines Dokuments zu drucken?

Erstellen von Kopf- und Fußzeilen mit CSS zum Drucken

Wenn ich keine wiederholten Kopf-/Fußzeilen verwenden kann, dann ist meine nächste Idee, meine Zeilen in meinem Klonobjekt zu zählen und bei maximaler Zahl zu brechen, eine neue Seite zu erstellen (erzwungene Höhe) und die Schleife erneut zu starten eine andere Seite in einem anderen div.

Ich freue mich über jede Anregung zur Ausführung der Kopf-/Fußzeilen-Lösung, da der vollständige Punkt für meine App der fertige gedruckte Vorschlag war. 

19
zzipper72

Ok, keine Abnehmer in dieser Sache, also mit ein paar Tagen mehr umsehen und beschließen, keine eigene Lösung zu schreiben, hier ist was ich gefunden habe.

Ganz unten in einem Stack-Beitrag ohne Stimmen und ohne Kommentare war dieser einsame kleine Link: http://welcome.totheinter.net/columnizer-jquery-plugin/#comment-53243

Dieses Ding ist großartig, es ist so konzipiert, dass es mit breiten Inhaltsseiten umgehen und diese wie eine Zeitung in Spalten formatieren kann. Sie verarbeitet Seitenumbrüche besonders gut und ist recht flexibel.

In meinem Fall brauchte ich eine einzelne Spalte (Seitenbreite) und wiederholte Kopf- und Fußzeilen. Ich habe Beispiel 10 als Basis verwendet: http://welcome.totheinter.net/autocolumn/sample10.html

Ich habe einfach den Link zum Plug-In hinzugefügt, die erforderlichen IDs und Klassen an meine Seite angepasst und einige kleinere CSS-Änderungen in Höhe und Breite vorgenommen, und ich konnte mehrseitige Inhalte mit sich wiederholenden Kopf- und Fußzeilen in Google Chrome drucken! (bevorzugter Browser meines Unternehmens)

TIPPS:

  • Ein kleiner CSS-Trick, ich habe den Inhalt div MIN-HEIGHT so gesetzt, dass er die Fußzeile auf kurzen Seiten nach unten gedrückt hat. (Tun Sie dies nicht, wenn Sie möchten, dass der Benutzer die Option Hochformat oder Querformat hat). Mein endgültiger Druck ist fixiert und das war großartig für mich.

  • Ich habe verschiedene Höhen getestet, um zu sehen, wie der Inhalt gebrochen wird. Es war jedes Mal glatt.

Ich habe versucht, mein letztes Beispiel in JsBin und Fiddle zu posten, aber es lief jedes Mal ein Fehler ab.

Das obige Beispiel 10 ist also ein großartiger Ausgangspunkt, wie es vorher und nachher gezeigt wird.

Hier ist mein endgültiger Inhalt mit variabler Höhe und sich wiederholenden Kopf- und Fußzeilen: (Dies ist die Ansicht, wenn ich auf den Browser "Link/Button in Chrome" klicke) enter image description here

UPDATE 7/2014: Wieder einmal ist Chrome mit Printproblemen meine Existenz. Ich habe unten den Kommentar zu dem von mir angegebenen Link gesehen. Er hat Recht, es wird richtig dargestellt, aber die Druckansicht ist falsch. Tut mir leid, aber es ist immer noch ein gutes Beispiel, um die Einstellungen kennenzulernen.

Ich verwende diese Lösung immer noch, es funktioniert zwar, aber Sie müssen CSS und JS var an die Größe des Inhalts anpassen. Die Größenkombinationen sind sehr empfindlich, aber wenn Sie die Seitenhöhe/-breite und die Inhaltsgröße richtig eingestellt haben, funktioniert es. Ich musste separate Funktionen für Papierformate/Brief schreiben. Es ist begrenzt, funktioniert aber für unsere Zwecke. 

Ich bemerkte auch, dass es abhängig von meiner Fenstergröße nicht immer richtig aussah, aber das endgültige PRINTED-Produkt war erwartungsgemäß mit sich wiederholenden Kopf- und Fußzeilen. Daher verwendete ich ein Fenster, das direkt gedruckt wurde, sodass der Benutzer die Ausgabe nicht bemerkte , sah aber eher das Chromdruck-Rendering. Ich hasse diese Art von Problemumgehung, aber jeder in meinem Büro, der Chrome verwendet, ist ein notwendiges Übel.

24
zzipper72

Dies ist möglicherweise keine direkte Antwort auf Ihre Frage, aber möglicherweise die direkte Lösung Ihres Problems.

Nach brennenden Tagen und Wochen, wie man dieses Problem lösen kann, habe ich es endlich aufgegeben, den direkten HTML/CSS-Druck auf sich wiederholende Kopf-/Fußzeilen anzuwenden. Ich habe viele Codes und Beispiele gesehen, aber jeder von ihnen entspricht nicht genau meinen Bedürfnissen. Es fehlt immer oder wird nicht korrekt gedruckt.

Die für mich akzeptable Lösung ist eine Kombination aus einfachem HTML, einfachem CSS und der Konvertierung in PDF. Sie werden überrascht sein, wie einfach die HTML-Struktur und das CSS sind.

Diese Lösung ist nicht ganz meine, sondern eine Kombination aus obigen Codes und der Bibliothek wkhtmltopdf. Bitte nicht ausgeflippt, das ist sehr einfach zu installieren, genau das habe ich Windows (MSVC 2013) Version 0.12.2.1 verwendet, ich habe ein Windows 7 64bit mit xampp als Stack. Sie können diesem Tutorial folgen, wie Sie Install wkhtmltopdf

Nach der Installation sollten Sie diesen Code erstellen können 

<?php
// Test correct and failed output
// Shell_exec('c:\wkhtmltopdf\bin\wkhtmltopdf --asdasdsadsad 2>> err1.txt 1>> out1.txt');
Shell_exec('c:\wkhtmltopdf\bin\wkhtmltopdf --orientation Landscape C:\xampp\htdocs\test\Template.html google.pdf');
?>
<html>
    <head>
    </head>
    <body>
        <p>Magical ponies!</p>
    </body>
</html>

Der Inhalt von Template.html, den Sie in php Shell_exec () sehen, finden Sie unten. Lassen Sie mich kurz erklären, was diese Parameter sind:

  • c:\wkhtmltopdf\bin\wkhtmltopdf - Hier haben Sie die Datei wkhtmltopdf installiert. Sie können entscheiden, wo Sie sich befinden, aber um es zugänglich zu machen, habe ich C: drive verwendet, genau wie im Tutorial.
  • --orientation Landscape - Dies sind einige der optionalen Parameter. Sie können sich auf das offizielle Dokument beziehen, um mehr über die Einstellungen zu erfahren.
  • C:\xampp\htdocs\test\Template.html - Dies ist der Speicherort Ihrer HTML-Datei, die Sie konvertieren möchten. Leider denke ich, dass Sie keine HTML-Zeichenfolge direkt eingeben können.
  • google.pdf - Name und Ort der generierten Datei.

<!DOCTYPE html>
<html>
    <head>
    <style>
    a{
        color: black;
        text-decoration: none;
    }
    a:hover{
        cursor: inherit;
    }
    #main-report{
        width: 100%;
    }
    table { 
        color: #333;
        font-family: Helvetica, Arial, sans-serif;
        width: 640px; 
        border-collapse: collapse; 
        border-spacing: 0; 
    }
    td, th { 
        border: 1px solid transparent; /* No more visible border */
        height: 30px; 
        font-size: 11px;
    }
    th {
        background: #DFDFDF;  /* Darken header a bit */
        font-weight: bold;
    }
    td {
        background: #FAFAFA;
        text-align: center;
    }
    /* Cells in even rows (2,4,6...) are one color */ 
    tr:nth-child(even) td { background: #F1F1F1; }
    /* Cells in odd rows (1,3,5...) are another (excludes header cells)  */ 
    tr:nth-child(odd) td { background: #FEFEFE; }
    table, tr, td, th, tbody, thead, tfoot {
        page-break-inside: avoid !important;
    }
    </style>
    </head>
    
    <body>
        <table id="main-report">
            <thead>
                <tr>
                    <th colspan="9">Inventory</th>
                    <th colspan="8">Inspection Report</th>
                </tr>
                <tr>
                    <th rowspan="2">Description</th>
                    <th rowspan="2">Serial No.</th>
                    <th rowspan="2">Qty</th>
                    <th rowspan="2">Unit Cost</th>
                    <th rowspan="2">Total Cost</th>
                    <th rowspan="2">Property No.</th>
                    <th rowspan="2">Date Acquired</th>
                    <th rowspan="2">Years in Service</th>
                    <th rowspan="2">Accumulated Depreciation</th>
                    <th colspan="5">Disposition</th>
                    <th rowspan="2">Appraisal 14</th>
                    <th rowspan="2">OR No.</th>
                    <th rowspan="2">Amount</th>
                </tr>
                <tr>
                    <th>9</th>
                    <th>10</th>
                    <th>11</th>
                    <th>12</th>
                    <th>13</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td></td>
                    <td></td>
                    <td>1</td>
                    <td>60,000.00</td><!-- UNIT COST -->
                    <td>60,000.00</td><!-- TOTAL COST-->
                    <td>000001</td>
                    <td>11/03/2000</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                
                <tr>
                    <td></td>
                    <td></td>
                    <td>1</td>
                    <td>60,000.00</td><!-- UNIT COST -->
                    <td>60,000.00</td><!-- TOTAL COST-->
                    <td>000002</td>
                    <td>11/03/2015</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                
                <tr>
                    <td></td>
                    <td></td>
                    <td>1</td>
                    <td>60,000.00</td><!-- UNIT COST -->
                    <td>60,000.00</td><!-- TOTAL COST-->
                    <td>000003</td>
                    <td>11/03/2015</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                
                <tr>
                    <td></td>
                    <td>SN00001</td>
                    <td>1</td>
                    <td>60,000.00</td><!-- UNIT COST -->
                    <td>60,000.00</td><!-- TOTAL COST-->
                    <td>000004</td>
                    <td>11/03/2015</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                
                <tr>
                    <td></td>
                    <td></td>
                    <td>1</td>
                    <td>60,000.00</td><!-- UNIT COST -->
                    <td>60,000.00</td><!-- TOTAL COST-->
                    <td>000005</td>
                    <td>11/03/2015</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                
                <tr>
                    <td></td>
                    <td></td>
                    <td>1</td>
                    <td>60,000.00</td><!-- UNIT COST -->
                    <td>60,000.00</td><!-- TOTAL COST-->
                    <td>000006</td>
                    <td>11/03/2015</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                
                <tr>
                    <td></td>
                    <td>faksdjfh skdjh h lsdjl ksd <br/> asdfjdhsfljshdfjksahdf <br/> jsdhfjsadhfjsahfkjsdhkjh</td>
                    <td>1</td>
                    <td>60,000.00</td><!-- UNIT COST -->
                    <td>60,000.00</td><!-- TOTAL COST-->
                    <td>000007</td>
                    <td>11/03/2015</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                
                <tr>
                    <td></td>
                    <td></td>
                    <td>1</td>
                    <td>60,000.00</td><!-- UNIT COST -->
                    <td>60,000.00</td><!-- TOTAL COST-->
                    <td>000008</td>
                    <td>11/03/2015</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                
                <tr>
                    <td></td>
                    <td></td>
                    <td>1</td>
                    <td>60,000.00</td><!-- UNIT COST -->
                    <td>60,000.00</td><!-- TOTAL COST-->
                    <td>000009</td>
                    <td>11/03/2015</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                
                <tr>
                    <td></td>
                    <td></td>
                    <td>1</td>
                    <td>60,000.00</td><!-- UNIT COST -->
                    <td>60,000.00</td><!-- TOTAL COST-->
                    <td>000010</td>
                    <td>11/04/2015</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                
                <tr>
                    <td></td>
                    <td></td>
                    <td>1</td>
                    <td>60,000.00</td><!-- UNIT COST -->
                    <td>60,000.00</td><!-- TOTAL COST-->
                    <td>000011</td>
                    <td>11/04/2015</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                
            </tbody>
        </table>
    <script>
    </script>
</body></html>

hier ist das Endergebnis

[1]: 

Die Antwort auf diese Frage hängt von der Struktur Ihres Dokuments ab. Wenn es sich aus einer Reihe kurzer, unzerbrechlicher Abschnitte zusammensetzen lässt, dann haben Sie Glück! Es gibt eine Chrome-kompatible Möglichkeit, laufende Kopfzeilen in dieser Art von Dokument zu simulieren (eigentlich funktioniert es in allen gängigen Desktop-Browsern).

Die Grundidee besteht darin, eine Kopie der Kopfzeile oben in jedem unzerbrechlichen Abschnitt zu platzieren und dann die Kopie mit einem negativen Rand auszublenden, so dass sie nur dann sichtbar ist, wenn ein Seitenumbruch den Abschnitt auf die nächste Seite bringt. Dies ist jedoch ein bisschen zu stark vereinfacht. Ich würde daher empfehlen, den folgenden Code zu studieren, bevor Sie dies an Ihren eigenen Dokumenten versuchen.

Testdokument:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .section {
        display: table;
        width: 100%;
      }
      .section > div {
        display: table-cell;
        overflow: hidden;
      }
      .section ~ .section > div:before {
        content: "";
        display: block;
        margin-bottom: -2.5em; /* inverse of header height */
      }
      .section > div > div {
        page-break-inside: avoid;
        display: inline-block;
        width: 100%;
        vertical-align: top;
      }
      .header {
        height: 2.5em; /* header must have a fixed height */
      }
      .content { /* this rule set just adds space between sections and is not required */
        margin-bottom: 1.25em;
      }
    </style>
  </head>
  <body>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
            Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
            Unbreakable section.<br/>Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
            Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
            Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
            Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
            Unbreakable section.<br/>Unbreakable section.
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Sie sollten diese Technik nicht für Dokumente verwenden, deren Textblöcke größer als etwa 1/3 einer Seite sind. Sie eignet sich jedoch hervorragend für Dokumente, die aus kleinen, diskreten Abschnitten wie Formularen und Tabellen bestehen.

Meine Antwort auf dieser andere Beitrag könnte auch von Interesse sein. Es zeigt, wie Sie Chrome-kompatible, sich wiederholende Tabellenheader erstellen, die dieselben Grundprinzipien verwenden. Das zusätzliche Markup wird jedoch über Javascript hinzugefügt, sodass das ursprüngliche HTML-Dokument nicht "verschmutzt" wird.

2
DoctorDestructo

Ich benutze printThis , um das Problem zu lösen. Sie müssen die Druckbereichs-ID oder den Klassennamen angeben.

0
Tester

Leider ist es ein bekannter Webkit-Fehler (Chrome und Safari) - siehe hier . Ich habe oft versucht, einen Workaround zu finden, aber ohne Glück.

Das Beispiel für die akzeptierte Antwort scheint nicht zu funktionieren, wenn Sie vom Browser aus drucken.

0
dstefanis