ネイティブjsは、指定されたノード要素を出力します

非常に簡単です(txtファイルに貼り付け、サフィックスをhtmlに変更して開くと、効果を確認できます):

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>打印</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div>
    <span style="color:red">这里不打印 !!!</span>
</div>

<div id="printDiv">
    <span style="color:green">打印这里!!</span>
</div>
<button onclick="print()">打印</button>

<script>
    function print(){
     
     
        // 设置要打印内容的 id: printDiv
        const WindowPrt = window.open('', '打印', 'width=' + (screen.availWidth - 10) + ',height=' + (screen.availHeight - 50) + ',left=0,top=0,location=0,menubar=0,toolbar=0,scrollbars=0,status=0'); // 裸全屏
        WindowPrt.document.head.innerHTML = window.document.head.innerHTML // 加入当前所有头 - 以防样式丢失
        WindowPrt.document.body.innerHTML = document.getElementById('printDiv').innerHTML; // 载入指定body
        WindowPrt.print() // 调用打印
        WindowPrt.close() // 自动等待print结束后执行
    }
</script>

</body>
</html>

このメソッドをホームページに配置し、パラメーターを渡して、パブリックを実現します(ネイティブのonclick()イベントで呼び出します)。

<script>
    // 打印
    var rootPrint = function (elId) {
    
    
      // 设置要打印内容的 id: elId
      const WindowPrt = window.open('', '打印', 'width=' + (screen.availWidth - 10) + ',height=' + (screen.availHeight - 50) + ',left=0,top=0,location=0,menubar=0,toolbar=0,scrollbars=0,status=0'); // 裸全屏
      WindowPrt.document.head.innerHTML = window.document.head.innerHTML // 加入当前所有头 - 以防样式丢失
      WindowPrt.document.body.innerHTML = document.getElementById(elId).innerHTML; // 载入指定body
      WindowPrt.print() // 调用打印
      WindowPrt.close() // 自动等待print结束后执行
    }
  </script>

おすすめ

転載: blog.csdn.net/GeniusXYT/article/details/109274569
おすすめ