本教程详细介绍了如何使用javascript将网页中的特定html元素（如收据）打印到pdf或纸张。通过将目标元素的html内容封装为data uri并在新窗口中打开，结合内联javascript触发自动打印，实现了一种高效且用户友好的局部内容打印解决方案，避免了复杂的内容隐藏与恢复操作。
在构建复杂的网页应用时，经常会遇到需要打印页面特定区域内容的需求，例如电商网站的订单收据、报告或证书。传统的做法可能涉及通过JavaScript动态隐藏或显示页面元素，但这通常会导致页面闪烁或复杂的DOM操作。本教程将介绍一种更为优雅且自动化的方法，利用Data URI和内联JavaScript实现特定元素的打印功能。
核心原理概述
本方案的核心在于以下几个关键技术点：
- Data URI (数据统一资源标识符)：Data URI 允许我们将小型文件直接嵌入到HTML、CSS或JavaScript中，而无需外部链接。在这里，我们将待打印的HTML内容编码成一个Data URI，浏览器可以将其作为一个独立的HTML页面进行渲染。
- window.print() 方法：这是浏览器内置的打印功能，调用它会弹出操作系统的打印对话框，允许用户选择打印机或保存为PDF。
- 内联 JavaScript：为了实现自动打印，我们将在Data URI所承载的HTML内容中嵌入一段JavaScript代码，使其在新页面加载完成后自动调用 window.print()。
- 动态样式注入：为了确保打印内容的最佳呈现，我们可以在打印前动态注入额外的CSS样式，例如居中布局。
HTML 结构准备
首先，需要将你希望打印的特定内容（例如收据表格）封装在一个独立的容器元素中。这样做有助于JavaScript精确地获取其HTML内容。同时，为了打印时的样式一致性，建议将与该内容相关的CSS样式直接嵌入到该容器内部或其子元素中，以确保在新打开的打印页面中样式能够正确应用。
以下是一个收据表格的HTML结构示例，它被包裹在一个 section 标签内，并且其样式直接嵌入在表格中：
立即学习“Java免费学习笔记（深入）”；
# 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代码。我们将创建一个函数，该函数在被调用时执行以下操作：
-
获取目标内容并注入打印逻辑 首先，获取包含收据的 table 元素。然后，向其内部动态注入一个
function printReceipt() { const receiptTable = document.querySelector('.receipt'); // 动态注入用于打印居中的CSS样式，这里通过修改已有的style标签实现 // 注意：这里假设receiptTable内部有一个网页特定元素打印示例
这是页面上的其他内容，不应被打印。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
# 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$
