Heim > Artikel > Web-Frontend > So implementieren Sie das Drucken in JS (ausführliche Antwort kombiniert mit Code)
So implementieren Sie das Drucken in JS (ausführliche Antwort kombiniert mit Code)
- 亚连Original
- 2018-05-18 10:31:052057Durchsuche
Im Folgenden habe ich für Sie zusammengestellt, wie Sie das Drucken in JS implementieren können. Interessierte Studenten können einen Blick darauf werfen.
1. Wie JS das Drucken implementiert
Methode 1: window.print()
window.print(); ein Druckdialogfeld wird angezeigt, in dem der Inhalt in window.document.body.innerHTML gedruckt wird. Das Folgende ist ein Beispiel für einen teilweisen Ausdruck aus dem Internet. Der Nachteil dieses Beispiels besteht darin, dass der Inhalt der Seite durch den Ausdruck verändert wird.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>局部打印案例</title>
<script type="text/javascript">
function doPrint() {
bdhtml=window.document.body.innerHTML;
sprnstr="<!--startprint-->";
eprnstr="<!--endprint-->";
prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));
window.document.body.innerHTML=prnhtml;
window.print();
}
</script>
</head>
<body>
<p>1不需要打印的地方</p>
<p>2这里不要打印啊</p>
<!--startprint--><!--注意要加上html里star和end的这两个标记-->
<h1>打印标题</h1>
<p>打印内容~~</p>
<!--endprint-->
<button type="button" onclick="doPrint()">打印</button>
<p>不打印的地方啊哈哈哈哈</p>
<p>2</p>
</body>
</html>
[javascript] view plain copy
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>局部打印案例</title>
<script type="text/javascript">
function doPrint() {
bdhtml=window.document.body.innerHTML;
sprnstr="<!--startprint-->";
eprnstr="<!--endprint-->";
prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));
window.document.body.innerHTML=prnhtml;
window.print();
}
</script>
</head>
<body>
<p>1不需要打印的地方</p>
<p>2这里不要打印啊</p>
<!--startprint--><!--注意要加上html里star和end的这两个标记-->
<h1>打印标题</h1>
<p>打印内容~~</p>
<!--endprint-->
<button type="button" onclick="doPrint()">打印</button>
<p>不打印的地方啊哈哈哈哈</p>
<p>2</p>
</body>
</html>Methode 2: Verwenden Sie das HTML-Tag 273238ce9338fbb04bee6997e5552b95, um das Webbrowser-Steuerelement einzuführen
Diese Methode ist nur mit IE und anderen kompatibel Browser Es kann nicht verwendet werden. Gleichzeitig kann es nur von Browsern unter IE10 verwendet werden. Die Aufrufmethode lautet wie folgt:
<body>
<object id="WebBrowser" classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height="0" width="0"> </object>
</body>
<script>
WebBrowser.ExecWB(1,1) //打开
WebBrowser.ExecWB(2,1) //关闭现在所有的IE窗口，并打开一个新窗口
WebBrowser.ExecWB(4,1) //保存网页
//--------------- 常用 ---------------
WebBrowser.ExecWB(6,1) //打印
WebBrowser.ExecWB(7,1) //打印预览
WebBrowser.ExecWB(8,1) //打印页面设置
//-------------------------------------
WebBrowser.ExecWB(10,1) //查看页面属性
WebBrowser.ExecWB(15,1) //撤销
WebBrowser.ExecWB(17,1) //全选
WebBrowser.ExecWB(22,1) //刷新
WebBrowser.ExecWB(45,1) //关闭窗体无提示
</script>
<body>
<object id="WebBrowser" classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height="0" width="0"> </object>
</body>
<script>
WebBrowser.ExecWB(1,1) //打开
WebBrowser.ExecWB(2,1) //关闭现在所有的IE窗口，并打开一个新窗口
WebBrowser.ExecWB(4,1) //保存网页
//--------------- 常用 ---------------
WebBrowser.ExecWB(6,1) //打印
WebBrowser.ExecWB(7,1) //打印预览
WebBrowser.ExecWB(8,1) //打印页面设置
//-------------------------------------
WebBrowser.ExecWB(10,1) //查看页面属性
WebBrowser.ExecWB(15,1) //撤销
WebBrowser.ExecWB(17,1) //全选
WebBrowser.ExecWB(22,1) //刷新
WebBrowser.ExecWB(45,1) //关闭窗体无提示
</script>Der Vorteil dieser Methode besteht darin, dass eine Druckvorschau unter IE angezeigt werden kann . Dies ist eine sehr benutzerfreundliche Funktion zum Drucken, aber leider unterstützen höhere Versionen von IE-Browsern WebBrowser nicht
Methode 3: Verwenden Sie document.execCommand("print")
Diese Methode ist auch kompatibel. Verschiedene Versionen von Browsern, wie window.print(), starten das Druckdialogfeld. Das Druckdialogfeld von Chrome verfügt über eine Vorschaufunktion, IE und Firefox öffnen jedoch nur das Druckeinstellungsdialog ohne Vorschaufunktion.
Oben habe ich für Sie zusammengestellt, wie Sie das Drucken in JS implementieren. Ich hoffe, dass es Ihnen in Zukunft hilfreich sein wird.
Verwandte Artikel:
Funktion in js Für Fragen zum Hinzufügen! Vorne ist der Code beigefügt
Detaillierte Erklärung, wie JS mit der App interagiert (Code ist beigefügt)
Das obige ist der detaillierte Inhalt vonSo implementieren Sie das Drucken in JS (ausführliche Antwort kombiniert mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!