本教程将详细介绍一种利用 javascript 和 data uri 技术，实现网页中特定 html 元素（如收据）打印到 pdf 或纸张的有效方法。该方案避免了传统隐藏/显示 dom 元素的繁琐操作，通过动态生成包含目标内容的独立 html 页面并在新窗口中触发打印，提供了一种更优雅、更专业的局部打印解决方案，并涵盖了 html 结构准备、javascript 逻辑实现及相关注意事项。
在构建现代 Web 应用时，经常会遇到需要打印页面中特定区域（例如购物收据、报告片段或特定表格）的需求。传统的做法可能是通过 JavaScript 动态隐藏页面上除目标内容之外的所有元素，然后触发 window.print()，打印完成后再恢复元素的显示状态。这种方法不仅操作繁琐，容易导致页面闪烁，用户体验不佳，而且在复杂页面结构下维护成本较高。
本教程将介绍一种更为优雅和高效的解决方案：利用 JavaScript 动态创建包含目标内容的新 HTML 页面，并通过 Data URI 的形式在新窗口中打开并立即触发打印。这种方法能够将打印内容完全隔离，避免了对当前页面 DOM 结构的干扰，实现了干净、专业的局部打印效果。
1. HTML 结构准备
为了实现特定元素的局部打印，我们需要确保目标内容及其相关的样式是自包含的。这意味着所有的样式信息最好能随同目标 HTML 片段一起被复制。一个推荐的做法是将目标内容包裹在一个独立的容器中，并且其特有的样式可以直接内联或嵌入在容器内部。
以下是一个示例的收据 HTML 结构，为了便于打印，我们将其包裹在一个
立即学习“前端免费学习笔记（深入）”；
/* 收据专属样式 */ .receipt { border-collapse: collapse; max-width: 80%; font-family: sans-serif; /* 初始状态不居中，等待JS动态注入 */ } .receipt td { padding: .5em; } .receipt tr:nth-child(even) { border: 1px solid #333; border-inline: none; background: #ddd; } .receipt tr:nth-child(odd) { background: #fff } .header-Uprice, .item-Uprice, .header-qty, .item-qty { text-align: center } .total { border-bottom: 3px double #000 }
# Item Description Unit Price Qty Price 1 Dummy Item1 200$ 1 200$ 2 Dummy Item2 75$ 1 75$ 3 Dummy Item3 100$ 2 200$ Total 475$
关键点：
容器包裹: 将需要打印的整个内容（例如 .receipt 表格）放置在一个具有特定类名（如 receipt-section）的容器中。内联样式或嵌入样式: 将与打印内容直接相关的 CSS 样式通过 标签直接嵌入到容器内部或表格内部。这样，当容器内容被复制时，样式也会一并被复制，确保打印效果的独立性。
2. JavaScript 打印逻辑实现
核心的打印逻辑将通过一个 JavaScript 函数 printReceipt() 来实现。这个函数负责捕获目标 HTML、动态注入打印指令和额外样式，然后在一个新的空白页面中展示并触发打印。
function printReceipt() { // 1. 获取包含收据的整个区域的HTML内容 const receiptSection = document.querySelector('.receipt-section'); if (!receiptSection) { console.error('未找到收据区域元素 (.receipt-section)。'); return; } let receiptHTML = receiptSection.innerHTML; // 2. 准备动态注入的CSS样式，用于打印前的居中显示 // 注意：这里使用了转义字符来确保字符串正确解析 const cssCenteringScript = ` const styleTag = document.querySelector('.receipt > style'); if (styleTag) { styleTag.innerHTML += '.receipt { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; }'; } `; // 3. 注入一个脚本到收据HTML中，使其在新页面加载后自动执行打印和居中样式 // 这个脚本将在新窗口加载完成后立即运行 const printScript = ` window.onload = () => { ${cssCenteringScript} // 注入居中样式 window.print(); // 触发打印 // 可选：打印后关闭当前窗口，但需注意浏览器安全策略可能阻止 // setTimeout(() => window.close(), 100); }; `; // 将打印脚本添加到收据HTML的末尾 receiptHTML += printScript; // 4. 将处理后的HTML内容编码为 Data URI const URI = 'data:text/html,' + encodeURIComponent(receiptHTML); // 5. 在新窗口中打开 Data URI，这将加载并显示收据内容，并自动触发打印 // '_blank' 表示在新标签页或新窗口中打开 window.open(URI, '_blank');}
代码解析：
document.querySelector(‘.receipt-section’).innerHTML: 获取包含收据及其样式的整个 HTML 片段。这是实现内容隔离的关键。cssCenteringScript: 这是一个字符串，包含了在打印前将收据内容居中的 CSS 规则。它会被动态地添加到收据的 标签中。这里使用 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 是一个经典的居中技巧。printScript: 这是一个 标签的字符串表示，它包含了 window.onload 事件监听器。当新窗口加载完成时，这个脚本会先注入居中样式，然后调用 window.print() 自动打开打印对话框。encodeURIComponent(receiptHTML): 将包含 HTML 内容的字符串进行 URI 编码。这是因为 Data URI 要求其内容是 URI 安全的。‘data:text/html,’ + …: 构建 Data URI。data: 协议允许直接在 URL 中嵌入数据，text/html 指定了数据的 MIME 类型。window.open(URI, ‘_blank’): 在一个新的空白浏览器窗口或标签页中打开这个 Data URI。由于 Data URI 包含了完整的 HTML 结构和内联脚本，新窗口会立即渲染内容并执行脚本，从而触发打印。
3. 集成打印功能到用户界面
为了让用户能够触发打印，我们可以将 printReceipt 函数绑定到一个按钮的点击事件上。
// 获取按钮元素 const button = document.querySelector('.printButton'); // 为按钮添加点击事件监听器 if (button) { button.addEventListener('click', printReceipt); } else { console.warn('未找到打印按钮 (.printButton)。'); }
4. 注意事项与优化建议
样式隔离的重要性: 这种方法的核心是确保被打印的 HTML 片段是完全自包含的。所有必需的 CSS 样式（包括字体、颜色、布局等）都应该以内联 标签的形式存在于被复制的 HTML 中，或者通过 标签引用一个公共的打印样式表（但这会增加复杂性，需要确保路径在新窗口中仍然有效）。Data URI 的长度限制: 尽管现代浏览器对 Data URI 的长度支持较好，但理论上仍然存在限制。对于非常庞大和复杂的 HTML 内容，Data URI 可能不是最佳选择。然而，对于像收据这样的中小型文档，它通常工作良好。浏览器兼容性与安全: window.open() 可能会受到浏览器弹出窗口拦截器的影响。用户可能需要手动允许弹出窗口。此外，window.close() 只有在由 window.open() 打开的窗口中才能生效，并且在某些浏览器中也可能受到限制。更专业的打印样式: 对于更复杂的打印需求，可以考虑使用 @media print CSS 规则。这种方法允许你为打印输出定义一套完全不同的样式，例如隐藏不必要的导航、调整布局、优化字体大小等，而无需修改原始 HTML 结构。这种方法与 Data URI 方案可以结合使用，即在 Data URI 内部的 标签中包含 @media print 规则。用户体验: 考虑在打印前提供一个预览功能，或者在打印完成后给用户一个反馈（例如“收据已发送至打印机”），以提升用户体验。
总结
通过利用 JavaScript 和 Data URI 技术，我们能够实现一种优雅、高效且不干扰原始页面 DOM 的局部内容打印方案。这种方法特别适用于需要打印特定、自包含文档片段（如收据、票据等）的场景。虽然它可能不是处理所有打印需求的终极解决方案，但对于许多常见的 Web 打印任务来说，它提供了一个简洁且功能强大的替代方案，避免了传统方法中“隐藏-打印-显示”的繁琐操作，从而提升了开发效率和用户体验。
以上就是前端局部打印：避免 DOM 隐藏/显示，优雅地打印指定 HTML 片段的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1584348.html
微信扫一扫 
支付宝扫一扫 
