当前位置：首页 > JavaScript

js实现打印页面

2026-03-01 02:19:00JavaScript

使用JavaScript打印页面

JavaScript提供了window.print()方法，可以直接调用浏览器的打印功能。这是最简单的实现方式：

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

自定义打印按钮

在HTML中添加一个按钮，通过点击事件触发打印：

<button onclick="window.print()">打印页面</button>

打印特定区域

如果需要打印页面中的特定部分，可以通过CSS控制打印内容：

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

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

打印前修改内容

可以在打印前动态修改页面内容，打印完成后恢复：

function printWithModifications() {
    const originalContent = document.body.innerHTML;
    const printContent = document.getElementById('content-to-print').innerHTML;

    document.body.innerHTML = printContent;
    window.print();

    document.body.innerHTML = originalContent;
}

使用打印样式表

创建专门的打印样式表，控制打印时的页面表现：

<link rel="stylesheet" href="print.css" media="print">

处理打印事件

可以监听打印前后的操作：

window.addEventListener('beforeprint', (event) => {
    console.log('准备打印');
});

window.addEventListener('afterprint', (event) => {
    console.log('打印完成');
});

打印PDF文件

如果需要打印PDF文件，可以使用PDF.js库：

function printPDF(url) {
    const pdfjsLib = window['pdfjs-dist/build/pdf'];
    pdfjsLib.getDocument(url).promise.then(function(pdf) {
        pdf.getPage(1).then(function(page) {
            const viewport = page.getViewport({scale: 1.0});
            const canvas = document.createElement('canvas');
            const context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            page.render({
                canvasContext: context,
                viewport: viewport
            }).promise.then(function() {
                const imgData = canvas.toDataURL('image/png');
                const printWindow = window.open('', '_blank');
                printWindow.document.write('<img src="' + imgData + '" onload="window.print()">');
                printWindow.document.close();
            });
        });
    });
}