js实现打印打印预览

实现打印预览的方法

在JavaScript中，可以通过调用window.print()方法直接触发浏览器的打印功能。但打印预览功能依赖于浏览器自身的支持，无法通过代码直接控制。以下是几种常见的实现方式：

使用window.print()方法

function printPage() {
    window.print();
}

调用该方法会打开浏览器的打印对话框，用户可以选择打印或预览（取决于浏览器）。

自定义打印样式

通过CSS媒体查询为打印页面设置特定样式，优化打印效果：

@media print {
    body * {
        visibility: hidden;
    }
    .print-section, .print-section * {
        visibility: visible;
    }
    .print-section {
        position: absolute;
        left: 0;
        top: 0;
    }
}

使用iframe实现局部打印

若需打印页面部分内容，可通过iframe实现：

function printPartial(selector) {
    const content = document.querySelector(selector);
    const iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    document.body.appendChild(iframe);
    const frameDoc = iframe.contentDocument || iframe.contentWindow.document;
    frameDoc.open();
    frameDoc.write(content.innerHTML);
    frameDoc.close();
    setTimeout(() => {
        iframe.contentWindow.focus();
        iframe.contentWindow.print();
        document.body.removeChild(iframe);
    }, 300);
}

注意事项

• 打印预览行为因浏览器而异，部分浏览器可能默认直接进入预览模式。
• 移动端浏览器对打印功能的支持可能有限。
• 可通过@pageCSS规则调整页边距等打印参数：

  @page {
    size: auto;
    margin: 10mm;
  }