Maison > Article > interface Web > Comment implémenter l'impression en JS (réponse détaillée combinée avec du code)

Comment implémenter l'impression en JS (réponse détaillée combinée avec du code)

亚连original: 2018-05-18 10:31:052119parcourir

Voici comment j'ai compilé pour vous comment implémenter l'impression dans JS. Les étudiants intéressés peuvent y jeter un œil.

1. Comment JS implémente l'impression

Méthode 1 : window.print()

window.print(); une boîte de dialogue d'impression apparaîtra, imprimant le contenu dans window.document.body.innerHTML , voici un exemple d'impression partielle tiré d'Internet. L'inconvénient de cet exemple est que l'impression modifiera le contenu de la page.

<!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>

Méthode 2 : Utiliser la balise html 273238ce9338fbb04bee6997e5552b95 pour introduire le contrôle Webbrowser

Cette méthode est uniquement compatible avec IE , autres Le navigateur ne peut pas être utilisé, et seuls les navigateurs inférieurs à IE10 peuvent être utilisés. La méthode d'appel est la suivante :

<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>

L'avantage de cette méthode est qu'un aperçu avant impression peut apparaître sous IE, ce qui est une fonction d'impression très conviviale. Mais malheureusement, les versions supérieures des navigateurs IE ne prennent pas en charge WebBrowser

Méthode 3 : utilisez document.execCommand("print")

Cette méthode est également compatible avec différentes versions de navigateurs. Comme window.print(), elle démarre la boîte de dialogue d'impression. La boîte de dialogue d'impression de Chrome est livrée avec une fonction d'aperçu, mais IE et Firefox n'apparaissent que. la boîte de dialogue des paramètres d'impression sans aperçu Fonction.

Ce qui précède est la façon dont j'ai compilé pour vous comment implémenter l'impression en JS. J'espère que cela vous sera utile à l'avenir.

Articles associés :

À propos de l'opération simple de téléchargement de fichiers en js (code joint, réponse détaillée)

fonction en js Pour questions sur l'ajout de ! devant, le code est joint

Explication détaillée de la façon dont JS interagit avec l'application (le code est joint)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：À propos de l'opération simple de téléchargement de fichiers en js (code ci-joint, réponse détaillée)Article suivant：À propos de l'opération simple de téléchargement de fichiers en js (code ci-joint, réponse détaillée)

Articles Liés

Voir plus