suchen

Heim >Web-Frontend >js-Tutorial >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:052144Durchsuche

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:

Über den einfachen Vorgang des Herunterladens von Dateien in js (Code angehängt, detaillierte Antwort)

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!

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：Über den einfachen Vorgang des Herunterladens von Dateien in js (Code im Anhang, ausführliche Antwort)Nächster Artikel：Über den einfachen Vorgang des Herunterladens von Dateien in js (Code im Anhang, ausführliche Antwort)

In Verbindung stehende Artikel

Mehr sehen