ホームページ > ウェブフロントエンド > jsチュートリアル > JS で印刷を実装する方法 (コードと組み合わせた詳細な回答)

JS で印刷を実装する方法 (コードと組み合わせた詳細な回答)

亚连
リリース: 2018-05-18 10:31:05
オリジナル
2149 人が閲覧しました

以下は、JS で印刷を実装する方法をまとめたものです。興味のある学生はご覧ください。

1. 印刷を実装するための JS 方法

方法 1: window.print()

印刷ダイアログ ボックスが表示されます。印刷されるのは、window.document.body.innerHTML のコンテンツです。次に、インターネットから取得した部分的な印刷の例を示します。この例の欠点は、印刷によってページのコンテンツが変更されることです。

<!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>
ログイン後にコピー

方法 2: HTML タグ を使用して WebBrowser コントロールを導入します

この方法は IE のみに対応しており、他のブラウザでは使用できません。 IE10 以下のブラウザでの呼び出し方法は次のとおりです:

<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>
ログイン後にコピー

このメソッドの利点は、IE で印刷プレビューが表示されることです。これは印刷には非常に使いやすい機能ですが、残念ながら、IE ブラウザの上位バージョンでは使用できません。 WebBrowser はもうサポートされません

方法 3: document.execCommand("print") を使用します

このメソッドも、window.print() と同様に、印刷ダイアログ ボックスを開始します。 Chrome の印刷ダイアログ ボックスには独自のプレビュー機能がありますが、IE、Firefox ではプレビュー機能はなく、印刷設定ダイアログ ボックスが表示されるだけです。

上記はJSで印刷を実装する方法についてまとめたものです。今後のお役に立てれば幸いです。

関連記事:

jsでファイルをダウンロードする簡単な操作について(コード添付、詳細回答)

jsの関数の前に!を付けることについての質問、コードを添付します

JSとJS の詳細 アプリの操作方法 (コード添付)

以上がJS で印刷を実装する方法 (コードと組み合わせた詳細な回答)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート