三种方法实现HTML页面局部打印(ctrl+p效果)效果

在HTML页面中实现局部打印（即只打印页面上的特定部分，类似于用户按下Ctrl+P并选择打印范围的效果），可以通过几种不同的方法来实现。以下是三种常见的方法：

1. 使用CSS的`@media print`

这是最常见和推荐的方法，因为它不依赖于JavaScript，仅通过CSS就能控制打印时的样式和内容。你可以使用@media print媒体查询来指定当页面被打印时应该显示哪些内容。


<!DOCTYPE html>  
<html>  
<head>  
    <title>局部打印示例</title>  
    <style>  
        /* 默认样式 */  
        .no-print { display: block; }  
        .print-only { display: none; }  
  
        /* 打印样式 */  
        @media print {  
            .no-print { display: none; }  
            .print-only { display: block; }  
        }  
    </style>  
</head>  
<body>  
  
<div class="no-print">这部分内容在打印时不会显示。</div>  
  
<div class="print-only">这部分内容只在打印时显示。</div>  
  
<div>这部分内容在打印和网页上都显示。</div>  
  
</body>  
</html>
<!DOCTYPE html>  
<html>  
<head>  
    <title>局部打印示例</title>  
    <style>  
        /* 默认样式 */  
        .no-print { display: block; }  
        .print-only { display: none; }  
  
        /* 打印样式 */  
        @media print {  
            .no-print { display: none; }  
            .print-only { display: block; }  
        }  
    </style>  
</head>  
<body>  
  
<div class="no-print">这部分内容在打印时不会显示。</div>  
  
<div class="print-only">这部分内容只在打印时显示。</div>  
  
<div>这部分内容在打印和网页上都显示。</div>  
  
</body>  
</html>
<!DOCTYPE html>  
<html>  
<head>  
    <title>局部打印示例</title>  
    <style>  
        /* 默认样式 */  
        .no-print { display: block; }  
        .print-only { display: none; }  
  
        /* 打印样式 */  
        @media print {  
            .no-print { display: none; }  
            .print-only { display: block; }  
        }  
    </style>  
</head>  
<body>  
  
<div class="no-print">这部分内容在打印时不会显示。</div>  
  
<div class="print-only">这部分内容只在打印时显示。</div>  
  
<div>这部分内容在打印和网页上都显示。</div>  
  
</body>  
</html>

2. 使用JavaScript动态创建打印窗口

这种方法通过JavaScript动态创建一个新的窗口（或iframe），将需要打印的内容复制到该窗口中，然后调用打印功能。


<!DOCTYPE html>  
<html>  
<body>  
  
<div id="printSection">这部分内容将被打印。</div>  
  
<button onclick="printDiv()">打印</button>  
  
<script>  
function printDiv() {  
    var printContents = document.getElementById('printSection').innerHTML;  
    var originalContents = document.body.innerHTML;  
  
    var printWindow = window.open('', '', 'height=600,width=800');  
  
    printWindow.document.write('<html><head><title>打印内容</title>');  
    printWindow.document.write('</head><body >');  
    printWindow.document.write(printContents);  
    printWindow.document.write('</body></html>');  
    printWindow.document.close();  
    printWindow.print();  
  
    // 可选：恢复原始页面内容  
    // window.setTimeout(function(){  
    //     printWindow.close();  
    //     document.body.innerHTML = originalContents;  
    // }, 1000);  
}  
</script>  
  
</body>  
</html>
<!DOCTYPE html>  
<html>  
<body>  
  
<div id="printSection">这部分内容将被打印。</div>  
  
<button onclick="printDiv()">打印</button>  
  
<script>  
function printDiv() {  
    var printContents = document.getElementById('printSection').innerHTML;  
    var originalContents = document.body.innerHTML;  
  
    var printWindow = window.open('', '', 'height=600,width=800');  
  
    printWindow.document.write('<html><head><title>打印内容</title>');  
    printWindow.document.write('</head><body >');  
    printWindow.document.write(printContents);  
    printWindow.document.write('</body></html>');  
    printWindow.document.close();  
    printWindow.print();  
  
    // 可选：恢复原始页面内容  
    // window.setTimeout(function(){  
    //     printWindow.close();  
    //     document.body.innerHTML = originalContents;  
    // }, 1000);  
}  
</script>  
  
</body>  
</html>
<!DOCTYPE html>  
<html>  
<body>  
  
<div id="printSection">这部分内容将被打印。</div>  
  
<button onclick="printDiv()">打印</button>  
  
<script>  
function printDiv() {  
    var printContents = document.getElementById('printSection').innerHTML;  
    var originalContents = document.body.innerHTML;  
  
    var printWindow = window.open('', '', 'height=600,width=800');  
  
    printWindow.document.write('<html><head><title>打印内容</title>');  
    printWindow.document.write('</head><body >');  
    printWindow.document.write(printContents);  
    printWindow.document.write('</body></html>');  
    printWindow.document.close();  
    printWindow.print();  
  
    // 可选：恢复原始页面内容  
    // window.setTimeout(function(){  
    //     printWindow.close();  
    //     document.body.innerHTML = originalContents;  
    // }, 1000);  
}  
</script>  
  
</body>  
</html>

3. 使用JavaScript触发打印对话框（但无法精确控制打印内容）

虽然这种方法不能直接控制打印哪些内容（它类似于用户按下Ctrl+P），但你可以通过一些UI提示引导用户选择正确的打印范围。


<!DOCTYPE html>  
<html>  
<body>  
  
<div id="printArea">这部分内容将被打印，但用户需要手动选择。</div>  
  
<button onclick="window.print();">打印</button>  
  
</body>  
</html>
<!DOCTYPE html>  
<html>  
<body>  
  
<div id="printArea">这部分内容将被打印，但用户需要手动选择。</div>  
  
<button onclick="window.print();">打印</button>  
  
</body>  
</html>
<!DOCTYPE html>  
<html>  
<body>  
  
<div id="printArea">这部分内容将被打印，但用户需要手动选择。</div>  
  
<button onclick="window.print();">打印</button>  
  
</body>  
</html>