js 怎样实现打印功能-js教程-PHP中文网

最直接的打印方式是调用 window.print() 方法，它会触发浏览器打印对话框并打印当前页面全部内容；2. 若需打印特定区域，推荐使用隐藏的 iframe 方式：创建一个隐藏 iframe，将目标内容及样式复制进去，调用其 contentwindow.print()，避免影响主页面；3. 精确控制打印样式应使用 css 的 @media print 媒体查询，通过该规则隐藏非打印元素、设置页边距、调整字体、避免分页断行、确保背景图片和颜色打印；4. 常见陷阱包括页面闪烁、异步内容未加载、样式丢失、onafterprint 事件不可靠等，最佳实践是隔离打印内容于 iframe、确保资源加载完成后再打印、使用专用打印样式表、合理利用 onbeforeprint 和 onafterprint 事件、并充分测试多浏览器兼容性；5. 对于复杂报表需求，如精确分页、页眉页脚、可搜索pdf等，应采用服务器端生成方案，推荐使用 puppeteer 或 playwright 控制 headless chrome 将html渲染为高质量pdf，而非依赖前端 window.print()。

js 怎样实现打印功能

在JavaScript里实现打印功能，最直接的方式就是调用浏览器内置的

window.print()

登录后复制

方法。这会触发浏览器的打印对话框，让用户选择打印机并预览当前页面的内容。如果你的需求只是打印整个网页，那这行代码就足够了。但实际项目里，我们往往需要更精细的控制，比如只打印页面的一部分，或者调整打印时的样式。

解决方案

要实现打印功能，核心思路是利用浏览器提供的

window.print()

登录后复制

方法。但仅仅调用它通常不够。

最基础的全局打印：

// 当用户点击某个按钮时触发
document.getElementById('printButton').addEventListener('click', function() {
    window.print(); // 这会打印当前浏览器窗口的全部内容
});

登录后复制

这很简单，但问题也来了：页面上可能有很多你不想打印的导航栏、广告或者交互元素。

打印特定区域：

这才是我们经常会遇到的场景。通常有两种主流做法，各有优缺点：

临时修改DOM结构： 这种方法是在打印前，通过CSS或JS把不需要打印的元素隐藏起来，只显示需要打印的部分。打印完成后，再恢复页面的原始状态。

function printSpecificArea(elementId) {
    const printContent = document.getElementById(elementId);
    if (!printContent) {
        console.error('找不到要打印的元素！');
        return;
    }

    const originalBodyHtml = document.body.innerHTML; // 保存原始页面内容
    document.body.innerHTML = printContent.outerHTML; // 将body内容替换为要打印的元素

    window.print(); // 触发打印

    // 打印结束后恢复页面内容
    // 注意：window.print() 是同步的，但用户取消打印时 onafterprint 不会触发
    // 所以这里需要一些事件监听来确保恢复
    window.onafterprint = function() {
        document.body.innerHTML = originalBodyHtml;
        window.onafterprint = null; // 清除事件，避免重复执行
    };
    // 如果用户直接关闭打印对话框而不是打印或取消，onafterprint可能不会立即触发
    // 实际应用中，你可能需要更复杂的机制，比如定时检查或用户交互来恢复
}

// 假设你有一个ID为 'printableArea' 的div
// document.getElementById('printAreaBtn').addEventListener('click', function() {
//     printSpecificArea('printableArea');
// });

登录后复制

这种方式的缺点是，页面内容会被瞬间替换，用户可能会看到闪烁。而且，如果打印对话框被用户取消，

onafterprint

登录后复制

事件不一定会触发，导致页面无法恢复。

使用隐藏的

iframe

登录后复制

或新窗口： 这是一种更优雅，也更推荐的方式。创建一个隐藏的

iframe

登录后复制

，将需要打印的内容复制到

iframe

登录后复制

中，然后调用

iframe

登录后复制

的

print()

登录后复制

方法。这样不会影响主页面的DOM结构。

function printContentInIframe(elementId) {
    const printContent = document.getElementById(elementId);
    if (!printContent) {
        console.error('找不到要打印的元素！');
        return;
    }

    let iframe = document.createElement('iframe');
    iframe.style.display = 'none'; // 隐藏iframe
    document.body.appendChild(iframe);

    // 将要打印的内容及样式复制到iframe中
    let iframeDoc = iframe.contentWindow.document;
    iframeDoc.open();
    iframeDoc.write(`
        <html>
        <head>
            <title>打印</title>
            <link rel="stylesheet" type="text/css" href="your_print_styles.css">
            <style>
                /* 也可以在这里直接写一些打印样式 */
                body { margin: 20mm; }
            </style>
        </head>
        <body>
            ${printContent.outerHTML}
        </body>
        </html>
    `);
    iframeDoc.close();

    // 等待iframe内容加载完成再打印，确保图片等资源也加载进来
    iframe.onload = function() {
        iframe.contentWindow.focus(); // 聚焦iframe，确保打印对话框正确弹出
        iframe.contentWindow.print();
        // 打印后可以移除iframe，或者在onafterprint事件中移除
        // iframe.remove();
    };

    // 也可以监听 iframe 的 onafterprint 事件来移除 iframe
    // 但同样，用户取消打印时可能不会触发
    iframe.contentWindow.onafterprint = function() {
        iframe.remove();
    };
}

// document.getElementById('printAreaBtnIframe').addEventListener('click', function() {
//     printContentInIframe('printableArea');
// });

登录后复制

这种方式隔离性好，不会影响主页面。缺点是需要处理样式表的引入，确保

iframe

登录后复制

内的样式和主页面一致或符合打印要求。

如何精确控制打印内容的样式？

这事儿吧，看似简单，实则门道不少。打印出来的效果和屏幕上看到的，那可真是两码事。想要精确控制打印样式，CSS媒体查询

@media print

登录后复制

是你的不二法宝。

我们通常会在CSS文件中专门为打印准备一套样式规则：

/* 默认屏幕样式 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
}
.navigation, .sidebar, .ad-banner {
    display: block; /* 屏幕上显示 */
}

/* 打印样式 */
@media print {
    /* 隐藏不需要打印的元素 */
    .navigation, .sidebar, .ad-banner, .print-button {
        display: none !important; /* 确保这些元素在打印时完全不可见 */
    }

    /* 调整字体大小和行高，适应纸张 */
    body {
        font-size: 12pt; /* 打印时通常用pt作为单位 */
        line-height: 1.5;
        color: #000; /* 确保文字是黑色，避免背景色影响 */
        margin: 0; /* 移除默认的body margin，让内容更紧凑 */
    }

    /* 设置打印边距，避免内容被裁切 */
    @page {
        margin: 1cm; /* 设置页边距 */
    }

    /* 强制分页，比如在每个报表项或章节后分页 */
    .page-break-before {
        page-break-before: always;
    }
    .page-break-after {
        page-break-after: always;
    }
    .no-break-inside {
        page-break-inside: avoid; /* 避免在元素内部断页，比如表格行或图片 */
    }

    /* 确保背景色和图片打印出来，默认浏览器可能不打印背景 */
    * {
        -webkit-print-color-adjust: exact; /* Chrome/Safari */
        color-adjust: exact; /* 标准属性 */
    }
    img {
        max-width: 100% !important; /* 确保图片不会溢出页面 */
        height: auto !important;
    }

    /* 移除链接下划线，打印时通常不需要 */
    a {
        text-decoration: none;
        color: inherit; /* 链接颜色和文本一致 */
    }

    /* 表格样式优化，确保边框和内容清晰 */
    table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid #ccc;
        padding: 8px;
    }
}

登录后复制

通过

@media print

登录后复制

，你可以针对性地隐藏元素、调整字体、设置页边距、控制分页，甚至优化表格的显示。记住，打印机对CSS的支持程度可能不如屏幕显示，所以尽量使用基础、稳定的CSS属性。有时候你会发现，一些复杂的布局（比如Flexbox或Grid）在打印时表现不如预期，这时可能需要回退到传统的块级布局或者浮动。

打印特定区域时有哪些常见陷阱和最佳实践？

打印特定区域，尤其是动态内容，确实容易踩坑。我个人觉得，这里面最让人头疼的，就是用户体验和代码健壮性的平衡。

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

常见陷阱：

页面闪烁和内容丢失： 如果你采用的是“临时修改DOM”的方法，用户在点击打印按钮到打印对话框出现的那一瞬间，页面可能会出现明显的布局变化甚至空白，这用户体验非常不好。更糟的是，如果用户取消了打印，页面可能无法正确恢复到原始状态，导致内容丢失或布局错乱。
异步内容未加载完成： 你的打印内容可能包含图片、图表或者通过AJAX加载的数据。如果在这些内容完全渲染或加载完成之前就调用了
```
window.print()
```
登录后复制
，打印出来的可能就是不完整的页面，甚至只是占位符。
样式丢失或错乱： 当你把内容复制到
```
iframe
```
登录后复制
或者新窗口时，如果没有正确引入主页面的CSS文件，或者
```
@media print
```
登录后复制
样式没有生效，打印出来的页面就会非常丑陋，甚至完全没有样式。
onafterprint
登录后复制
事件的不可靠性：
```
window.onafterprint
```
登录后复制
理论上是在打印对话框关闭后触发，但实际情况是，如果用户直接关闭了打印预览窗口，或者在某些浏览器上，这个事件可能不会被可靠触发，导致你用来恢复页面状态的代码无法执行。
跨域内容打印： 如果你的打印内容包含来自不同域的
```
iframe
```
登录后复制
或图片，可能会遇到安全限制，导致内容无法加载或打印。

最佳实践：

首选
iframe
登录后复制
或新窗口隔离打印内容：这种方式能最大程度地减少对主页面DOM的影响，提供更好的用户体验。将需要打印的内容连同其必要的CSS（可以通过
```
<link>
```
登录后复制
标签引入，或者直接
```
<style>
```
登录后复制
嵌入）一起写入
```
iframe
```
登录后复制
或新窗口，然后调用其
```
print()
```
登录后复制
方法。
确保内容完全加载和渲染：
- 对于图片等资源，可以在
```
iframe.onload
```
  登录后复制
  事件中再调用
```
print()
```
  登录后复制
  。
- 对于动态数据，确保数据加载和DOM渲染完成后再触发打印。可以考虑使用
```
Promise
```
  登录后复制
  或
```
async/await
```
  登录后复制
  来等待所有异步操作完成。
- 如果内容渲染复杂，可以考虑使用
```
requestAnimationFrame
```
  登录后复制
  或者一个短的
```
setTimeout
```
  登录后复制
  来确保浏览器有足够的时间来重绘。
使用专用的打印样式表： 避免在屏幕样式中混杂过多的打印逻辑。创建一个
```
print.css
```
登录后复制
文件，并通过
```
<link rel="stylesheet" href="print.css" media="print">
```
登录后复制
来引入。或者直接在主CSS中使用
```
@media print
```
登录后复制
块。

利用
window.onbeforeprint
登录后复制
和
window.onafterprint
登录后复制
：尽管

onafterprint

登录后复制

有些不可靠，但它们仍然是处理打印前后逻辑的重要钩子。

onbeforeprint

登录后复制

可以在打印前做一些准备工作（比如临时修改DOM，但要小心），

onafterprint

登录后复制

可以用来做清理工作。

window.onbeforeprint = function() {
    console.log('准备打印...');
    // 可以在这里临时添加一些打印专用的类名或样式
    document.body.classList.add('is-printing');
};
window.onafterprint = function() {
    console.log('打印完成或取消');
    // 清理临时添加的类名或样式
    document.body.classList.remove('is-printing');
};

登录后复制

考虑用户体验反馈： 在打印前给用户一个加载提示，告诉他们内容正在准备中。如果打印失败，也要给出明确的错误信息。
测试，测试，再测试： 在不同的浏览器（Chrome, Firefox, Edge, Safari）和操作系统上测试打印效果。打印机的驱动、浏览器版本都会影响最终效果，所以多测总是没错的。

对于复杂的报表或动态内容，如何实现更高级的打印需求？

当需求超越了简单的“打印当前页面或某个区域”时，比如需要生成带有页眉页脚、精确分页、目录、可搜索文本的PDF报表，或者需要服务器端定时生成并发送报表时，仅仅依靠前端的

window.print()

登录后复制

就显得力不从心了。这时候，我们通常会转向更专业的解决方案。

1. 客户端PDF生成：

这种方式是在浏览器端直接将HTML内容转换成PDF。它非常适合那些不需要服务器参与，或者数据量不大、安全性要求不那么高的场景。

html2canvas

登录后复制

+
jsPDF
登录后复制
：这是比较常见的一种组合。

html2canvas

登录后复制

能把DOM元素渲染成Canvas图像，然后

jsPDF

登录后复制

可以把这个Canvas图像嵌入到PDF中。 优点： 纯前端实现，无需服务器支持；用户体验好，即时生成。 缺点：

html2canvas

登录后复制

渲染复杂HTML（比如CSS3动画、SVG、复杂布局）时可能会有问题；生成的PDF本质上是图片，不可搜索文本；处理长页面分页比较麻烦，需要手动计算切图和PDF页。 适用场景： 简单的报告、发票、个人简历等。

// 示例代码片段 (需要引入html2canvas和jspdf库)
// <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
// <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

function generatePdfFromHtml(elementId) {
    const input = document.getElementById(elementId);
    if (!input) {
        console.error('找不到要生成PDF的元素！');
        return;
    }

    html2canvas(input, {
        scale: 2, // 提高清晰度
        useCORS: true // 如果有跨域图片，需要设置为true
    }).then(canvas => {
        const imgData = canvas.toDataURL('image/png');
        const { jsPDF } = window.jspdf; // 从umd模块获取jsPDF
        const pdf = new jsPDF('p', 'mm', 'a4'); // 'p' 纵向, 'mm' 单位, 'a4' 纸张

        const imgWidth = 210; // A4纸的宽度 (mm)
        const pageHeight = 297; // A4纸的高度 (mm)
        const imgHeight = canvas.height * imgWidth / canvas.width;
        let heightLeft = imgHeight;

        let position = 0;

        pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
        heightLeft -= pageHeight;

        while (heightLeft >= 0) {
            position = heightLeft - imgHeight;
            pdf.addPage();
            pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
            heightLeft -= pageHeight;
        }

        pdf.save('report.pdf');
    }).catch(error => {
        console.error('生成PDF失败:', error);
    });
}

// document.getElementById('generatePdfBtn').addEventListener('click', function() {
//     generatePdfFromHtml('reportContent');
// });

登录后复制

这段代码只是一个基础示例，处理长页面分页时，

html2canvas

登录后复制

生成的是一个长图，然后

jsPDF

登录后复制

需要手动计算分割并添加到多页，这块是比较麻烦且容易出错的。

2. 服务器端PDF生成：

这是处理复杂报表和动态内容打印的更强大、更可靠的方式。它将HTML渲染成PDF的过程放在服务器端完成。

Headless Chrome (Puppeteer/Playwright)： Node.js生态中最流行的方式。Puppeteer（或Playwright）可以控制一个无头（headless）的Chrome浏览器实例，让它加载你的HTML页面，然后通过API将其保存为PDF。 优点： 渲染效果与浏览器完全一致，支持所有CSS/JS特性；生成的PDF是可搜索文本的（因为是基于实际渲染的HTML）；可以轻松处理复杂布局、动态数据、图表等；可以添加页眉页脚、页码等。 缺点： 需要服务器资源（运行一个Chrome实例比较耗内存）；部署和维护相对复杂；生成速度可能不如纯粹的PDF库快，但渲染准确性高。 适用场景： 高质量、复杂的报表、发票、合同、动态图表、需要精确分页和页眉页脚的场景。

// Node.js 后端代码示例 (需要安装 puppeteer)
// npm install puppeteer

// const puppeteer = require('puppeteer');

// async function generatePdfFromServer(htmlContent) {
//     const browser = await puppeteer.launch();
//     const page = await browser.newPage();
//     // 可以直接设置HTML内容，也可以加载一个URL
//     await page.setContent(htmlContent, { waitUntil: 'networkidle0' }); // 等待网络空闲，确保所有资源加载

//     const pdfBuffer = await page.pdf({
//         format: 'A4',
//         printBackground: true, // 打印背景色和图片
//         margin: { top: '20mm', right: '20mm', bottom: '20mm', left: '20mm' },
//         // 可以添加页眉页脚模板
//         displayHeaderFooter: true,
//         headerTemplate: '<div style="font-size: 10px; margin-left: 20mm;">我的报表</div>',
//         footerTemplate: '<div style="font-size: 10px; margin-right: 20mm; text-align: right;"><span class="pageNumber"></span> / <span class="totalPages"></span></div>'
//     });

//     await browser.close();
//     return pdfBuffer; // 返回PDF的Buffer，可以保存为文件或发送给前端
// }

// // 在Express等框架中，可以这样使用：
// // app.get('/generate-report', async (req, res) => {
// //     const reportHtml = `<h1>年度销售报告</h1><p>...</p>`; // 你的动态HTML内容
// //     const pdf = await generatePdfFromServer(reportHtml);
// //     res.setHeader('Content-Type', 'application/pdf');
// //     res.setHeader('Content-Disposition', 'attachment; filename=report.pdf');
// //     res.send(pdf);
// // });

登录后复制

其他服务器端库：
- Python:
```
WeasyPrint
```
  登录后复制
  ,
```
ReportLab
```
  登录后复制
- Java:
```
Apache FOP
```
  登录后复制
  ,
```
iText
```
  登录后复制
- PHP:
```
Dompdf
```
  登录后复制
  这些库各有特点，但核心思想都是将HTML/XML或其他数据格式转换为PDF。

选择哪种方式？

简单、快速、纯前端展示性打印：
```
window.print()
```
登录后复制
或
```
iframe
```
登录后复制
打印。
需要将HTML转为图片PDF，且内容不复杂： 客户端
```
html2canvas
```
登录后复制
+
```
jsPDF
```
登录后复制
。
需要高质量、可搜索文本、复杂布局、精确分页、页眉页脚的PDF，或需要服务器端生成： 服务器端 Headless Chrome (Puppeteer/Playwright) 是最佳选择。