本教程将详细介绍一种利用 javascript 和 data uri 技术，实现网页中特定 html 元素（如收据）打印到 pdf 或纸张的有效方法。该方案避免了传统隐藏/显示 dom 元素的繁琐操作，通过动态生成包含目标内容的独立 html 页面并在新窗口中触发打印，提供了一种更优雅、更专业的局部打印解决方案，并涵盖了 html 结构准备、javascript 逻辑实现及相关注意事项。
在构建现代 Web 应用时，经常会遇到需要打印页面中特定区域（例如购物收据、报告片段或特定表格）的需求。传统的做法可能是通过 JavaScript 动态隐藏页面上除目标内容之外的所有元素，然后触发 window.print()，打印完成后再恢复元素的显示状态。这种方法不仅操作繁琐，容易导致页面闪烁，用户体验不佳，而且在复杂页面结构下维护成本较高。
本教程将介绍一种更为优雅和高效的解决方案：利用 JavaScript 动态创建包含目标内容的新 HTML 页面，并通过 Data URI 的形式在新窗口中打开并立即触发打印。这种方法能够将打印内容完全隔离，避免了对当前页面 DOM 结构的干扰，实现了干净、专业的局部打印效果。
1. HTML 结构准备
为了实现特定元素的局部打印，我们需要确保目标内容及其相关的样式是自包含的。这意味着所有的样式信息最好能随同目标 HTML 片段一起被复制。一个推荐的做法是将目标内容包裹在一个独立的容器中，并且其特有的样式可以直接内联或嵌入在容器内部。
以下是一个示例的收据 HTML 结构，为了便于打印，我们将其包裹在一个
立即学习“前端免费学习笔记（深入）”；
# 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 = ``;
// 将打印脚本添加到收据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 规则。它会被动态地添加到收据的
- printScript: 这是一个
- 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 函数绑定到一个按钮的点击事件上。
4. 注意事项与优化建议
- 样式隔离的重要性: 这种方法的核心是确保被打印的 HTML 片段是完全自包含的。所有必需的 CSS 样式（包括字体、颜色、布局等）都应该以内联
- Data URI 的长度限制: 尽管现代浏览器对 Data URI 的长度支持较好，但理论上仍然存在限制。对于非常庞大和复杂的 HTML 内容，Data URI 可能不是最佳选择。然而，对于像收据这样的中小型文档，它通常工作良好。
- 浏览器兼容性与安全: window.open() 可能会受到浏览器弹出窗口拦截器的影响。用户可能需要手动允许弹出窗口。此外，window.close() 只有在由 window.open() 打开的窗口中才能生效，并且在某些浏览器中也可能受到限制。
- 更专业的打印样式: 对于更复杂的打印需求，可以考虑使用 @media print CSS 规则。这种方法允许你为打印输出定义一套完全不同的样式，例如隐藏不必要的导航、调整布局、优化字体大小等，而无需修改原始 HTML 结构。这种方法与 Data URI 方案可以结合使用，即在 Data URI 内部的
- 用户体验: 考虑在打印前提供一个预览功能，或者在打印完成后给用户一个反馈（例如“收据已发送至打印机”），以提升用户体验。
总结
通过利用 JavaScript 和 Data URI 技术，我们能够实现一种优雅、高效且不干扰原始页面 DOM 的局部内容打印方案。这种方法特别适用于需要打印特定、自包含文档片段（如收据、票据等）的场景。虽然它可能不是处理所有打印需求的终极解决方案，但对于许多常见的 Web 打印任务来说，它提供了一个简洁且功能强大的替代方案，避免了传统方法中“隐藏-打印-显示”的繁琐操作，从而提升了开发效率和用户体验。
