Heim > Artikel > Web-Frontend > js-Implementierung des Prinzips der teilweisen Seitendruckvorschau und Beispielcode_Javascript-Kenntnisse

js-Implementierung des Prinzips der teilweisen Seitendruckvorschau und Beispielcode_Javascript-Kenntnisse

WBOYOriginal: 2016-05-16 16:42:382114Durchsuche

Kürzlich fragte ein Freund, wie man eine Vorschau in js druckt. Lassen Sie uns zunächst das Druckprinzip verstehen. Machen Sie einfach eine Startmarkierung für den Teil, den Sie drucken möchten. Sie können schreiben, was Sie möchten. Ich werde hier deb9743a1dda5b69a1ef24bbfc365042 den Inhalt schreiben, der gedruckt werden muss

c474806c1b49f890ebb5bd06e2d26ef3. Da das Markup nicht für Benutzer sichtbar sein muss, habe ich einen Kommentar hinzugefügt! Der spezifische Implementierungscode lautet wie folgt:

<!DOCTYPE html> 
<html> 
<head> 
<title>打印预览简单实现</title> 
</head> 
<body> 
<div> 
这是body 里的内容不需要打印，具体的页面设计根据自己的要求自行设计。如果需要一个页面多个tag,可以动态生成tag 
</div> 
<!--startprint--> 
<div> 
这是我需要打印的内容 
</div> 
<!--endprint--> 
<script type="text/javascript"> 
function preview() 
{ 
var bdhtml=window.document.body.innerHTML;//获取当前页的html代码 
var startStr="<!--startprint-->";//设置打印开始区域 
var endStr="<!--endprint-->";//设置打印结束区域 
var printHtml=bdhtml.substring(bdhtml.indexOf(startStr)+startStr.length,bdhtml.indexOf(endStr));//从标记里获取需要打印的页面 

window.document.body.innerHTML=printHtml;//需要打印的页面 
window.print(); 
window.document.body.innerHTML=bdhtml;//还原界面 
} 
preview(); 
</script> 
</body> 
</html>

Stellungnahme：

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

Vorheriger Artikel：Mein Node.js-Lernpfad (3) – Node.js-Funktionen, Rückrufe, synchroner und asynchroner Code und Ereignisloop_node.jsNächster Artikel：Mein Node.js-Lernpfad (3) – Node.js-Funktionen, Rückrufe, synchroner und asynchroner Code und Ereignisloop_node.js

In Verbindung stehende Artikel

Mehr sehen