本教程详细介绍了如何利用JavaScript将网页上的特定HTML元素（如电子收据）独立打印到PDF或纸张。通过将目标内容的HTML转换为Data URI并在新窗口中加载，并巧妙注入自动打印脚本和样式，我们能够实现页面局部内容的精确打印，避免了传统方法中隐藏/显示元素所带来的复杂性和不良用户体验。
在现代Web应用中，经常需要为用户提供打印特定内容的功能，例如打印订单收据、发票或报告。直接使用 window.print() 会打印整个页面，这通常不是我们期望的。传统的做法可能是通过JavaScript动态隐藏页面上不需要打印的元素，只显示目标内容，然后调用 window.print()，打印完成后再恢复页面布局。这种方法不仅操作繁琐，而且可能导致页面闪烁或布局错乱，用户体验不佳。
本教程将介绍一种更优雅、更隔离的方法，通过将特定HTML内容封装成Data URI并在新窗口中打开，然后自动触发打印，从而实现精确的局部内容打印。
核心思路
该方法的核心在于：
- 隔离内容： 将需要打印的HTML内容及其所有相关样式封装在一个独立的容器中。
- 生成Data URI： 将这个隔离的HTML内容编码成一个Data URI。
- 新窗口打印： 在一个新的浏览器标签页或窗口中打开这个Data URI，由于它只包含目标内容，因此可以实现局部打印。
- 自动触发： 在Data URI中注入JavaScript代码，使其在新窗口加载完成后自动调用 window.print()。
HTML 结构准备
首先，确保你的可打印内容（例如收据表格）被一个独立的容器包裹，并且其所有必要的CSS样式都包含在这个容器内部，或者至少是能够被这个容器在独立环境下正确渲染的。这是因为新打开的Data URI页面不会继承主页面的外部样式表。
建议将所有与收据相关的CSS样式直接嵌入到
# 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$
JavaScript 实现打印功能
接下来，我们将编写JavaScript函数来执行上述核心思路。
function printReceipt() {
// 1. 获取目标HTML元素（收据表格）
const receiptTable = document.querySelector('.receipt');
// 2. 准备打印页面的居中CSS（可选）
// 这段CSS将被动态添加到Data URI页面的style标签中，用于在打印前调整收据位置。
const cssCentering = `
.receipt {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0; /* 移除可能的外部margin影响 */
max-width: 90%; /* 调整最大宽度以适应打印区域 */
}
`;
// 3. 在收据表格中注入一个脚本，该脚本在新页面加载后执行：
// a. 将居中CSS添加到表格内部的
- 克隆目标元素 (receiptSection.cloneNode(true)).
- 在克隆的元素上进行修改（注入脚本和样式）。
- 使用克隆元素的 outerHTML 来生成Data URI。
- 这样可以避免修改原始页面DOM。
总结
通过利用Data URI和JavaScript的 window.print() 功能，我们可以实现对网页特定区域的精确、隔离打印。这种方法避免了传统隐藏/显示元素的复杂性，提供了一种相对简洁且用户体验更好的局部打印解决方案。遵循本文提供的HTML结构和JavaScript逻辑，你将能够轻松地为你的Web应用添加强大的局部打印功能。
