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