Heim > Web-Frontend > js-Tutorial > Implementierungsmethoden für Einzelseitendruck und Stapeldruck von Webseiten

Implementierungsmethoden für Einzelseitendruck und Stapeldruck von Webseiten

小云云
Freigeben: 2018-03-17 15:07:41
Original
11966 Leute haben es durchsucht

Dieser Artikel teilt Ihnen hauptsächlich die Implementierungsmethoden des Einzelseitendrucks und des Stapeldrucks von Webseiten mit.

Druckereignis: window.print()

1. Einzelseitendruck (Layoutdruck):

function printCnt(){
    //1.获取当前页的html代码  
    var body = window.document.body.innerHTML; 
	//2.要打印的部分(#print里面的内容就是要打印的内容)
    window.document.body.innerHTML =document.getElementById("print").innerHTML; 
    window.print();
    window.document.body.innerHTML = body;
	//重新载入当前文档:
    location.reload();
}
注意:location.reload();要加,因可解决JS window.print()第二次点击事件失效问题
Nach dem Login kopieren

2 🎜>Hinweis:

(1). Seitenumbruch steuern: page-break-after:always

Hinweis: Vermeiden Sie die Verwendung in Tabellen, schwebenden Elementen und Blockelementen mit Rahmen-Paging-Attributen

(2). Fügen Sie dem Inhalt jeder Seite eine Höhe hinzu, um Verzerrungen zu vermeiden

(3) Wenn der CSS-Stil nicht zum Drucken geladen ist, fügen Sie bitte hinzu:
<p  id="printcnt">
	<p id="page1" style="height:300px;page-break-after:always" >报告单1</p>
	<p id="page2" style="height:300px;page-break-after:always" >报告单2</p>
</p>
Nach dem Login kopieren
var printStr='';

(4). Wenn Sie window.open("showPrint.html","print"); verwenden, um die Vorschauseite zu drucken
var printHead = "<html><head><meta http-equiv=&#39;Content-Type&#39; content=&#39;text/html; charset=utf-8&#39;>"
			+"<link rel=&#39;stylesheet&#39;  type=&#39;text/css&#39; href=&#39;css/printcss.css&#39;></head><body>";
var printCnt=&#39;打印的内容&#39;;
printStr = printHead + printCnt;
Nach dem Login kopieren

Verwandte Empfehlungen:
printStr = printHead + printCnt;  
//如果是本地测试,需要先新建Print.html,如果是在域中使用,则不需要
var pwin=window.open("showPrint.html","print");
pwin.document.write(printStr); 
pwin.document.close();//这个是必须的 
注意:pwin.document.close(); 可以关闭showPrint.html的页面,使其第二次打印的时候不会跳转到showPrint.html
Nach dem Login kopieren


Drei Möglichkeiten zur Implementierung des Seitendrucks mit Javascript_Typische Spezialeffekte

Javascript-Code für die Implementierung des teilweisen Seitendrucks _Javascript-Kenntnisse

js oder jquery zum Realisieren von Seitendruck- und Teildruck-_Javascript-Fähigkeiten

Das obige ist der detaillierte Inhalt vonImplementierungsmethoden für Einzelseitendruck und Stapeldruck von Webseiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage