CSS-Paging-Druck

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen für den CSS-Paging-Druck vorstellen.

Ich habe schon lange keinen Artikel mehr geschrieben. Ich habe kürzlich an einem Mitarbeiter-Onboarding-Projekt gearbeitet. Das System hat eine funktionale Anforderung für den Stapeldruck persönlicher Informationen. Da ich noch nie zuvor mit der Druckfunktion in Kontakt gekommen bin, habe ich online nachgesehen und festgestellt, dass

jquery über eine Druckfunktions-API (PrintArea) verfügt. Wenn Sie an dieser API interessiert sind, können Sie die entsprechenden Kenntnisse selbst überprüfen . Ich werde nicht näher darauf eingehen. Damals beschloss ich, diese API zum Implementieren der Druckfunktion zu verwenden. Als ich diese API zum Implementieren der Funktion verwendete, stellte ich fest, dass ich zwar die Druckfunktion des Browsers aufrufen konnte, der gedruckte Inhalt jedoch leer war und keine Informationen enthielt. Dann habe ich online nachgesehen und die offizielle Website von jquery besucht, um mir die API anzusehen. Die meisten sagten, dass sie zuvor das Drucken unterstützte, aber jetzt muss ich dem Quellcode einen Code hinzufügen, nachdem ich lange daran gearbeitet habe Zeit, ohne es zu verstehen, aber ich denke, es sollte machbar sein, aber ich bin nicht sehr gut darin. Freunde, die interessiert sind, können es versuchen, und sie sollten viel gewinnen. Wenn dieser Plan nicht funktioniert, können wir nur weiterhin andere Optionen prüfen.

In diesem beunruhigenden Moment habe ich die Methode window.print() entdeckt. Es stellte sich heraus, dass Sie die Methode window direkt verwenden können, um die Druckfunktion zu realisieren. Gerade als ich in Ekstase war, zog leise eine dunkle Wolke über meinen Kopf und mein Leben wurde plötzlich düster. Obwohl die Druckfunktion implementiert werden kann, wird der Inhalt dicht gepackt, wenn die Webseite stapelweise gedruckt wird. Hey, als ich dachte, ich könnte dieses Problem perfekt lösen, wer hätte gedacht, dass das Leben immer so unbefriedigend sein würde. Es gibt keine andere Möglichkeit, als weiterhin zu untersuchen, wie die Seitendruckfunktion implementiert wird. Das erste, was mir damals in den Sinn kam, war, dem letzten zu paginierenden Container eine bestimmte Höhe hinzuzufügen, damit er die Höhe des A4-Papiers ausfüllt, und dann wird der nächste Inhalt automatisch auf die nächste Seite verschoben. Die Fantasie ist schön, aber die Realität ist grausam und unbefriedigend. Später fragte ich einen Kollegen und sagte, ich könnte das CSS-Druckattribut ausprobieren, um erzwungenes Paging zu implementieren, und sah einen Hoffnungsschimmer, als ich die

Dokumentationsbeschreibung sah Wenn das Druckattribut das Paginieren erzwingt, entspricht das Ergebnis nicht den Erwartungen. Ich war damals schon sehr deprimiert und konnte nicht herausfinden, warum es nicht funktionierte, aber ich wollte trotzdem nicht aufgeben, da in den offiziellen Dokumenten stand, dass es möglich sei, und davon gab es viele Online-Erklärungen, wie es erreicht werden könnte, warum konnte ich es nicht erreichen? Da ich nicht nachgeben wollte, entdeckte ich schließlich das Problem, das nicht implementiert werden konnte. In der äußeren Ebene befanden sich zwei p-Container. Der zu druckende Inhalt war der HTML-Code, den ich angehängt habe in den äußeren Container verschoben und gedruckt. Zu diesem Zeitpunkt hat das CSS-Druckattribut keine Auswirkung. Wenn Sie also in Zukunft das CSS-Druckattribut verwenden möchten, um die erzwungene Paging-Funktion zu implementieren, müssen Sie bedenken, dass es nur einen äußeren Container für den gedruckten Inhalt gibt.

CSS-Druckattribute sind wie folgt:

Paging-Beispiel (aus Online-Beispielen hier entlehnt):

<p><input type="button" value="打印" onclick="Print()" /></p>  
<p id="page1">  
        <table width="100%"  border="0" cellpadding="0" cellspacing="0"  style="page-break-after:always" >  
        <tr><td>第一页打印内容</td></tr>  
        </table>  
</p>  
<p id="page2">  
        <table width="100%"  border="0" cellpadding="0" cellspacing="0" id="content" >  
        <tr><td>第二页打印内容</td></tr>  
        </table>  
</p>  
</body>  
</html>

Ich glaube dir Ich habe den Fall in diesem Artikel gelesen. Sie beherrschen die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung des CSS3-Mischmodus

H5 APP Listening Return Event Processing

Das obige ist der detaillierte Inhalt vonCSS-Paging-Druck. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!