本教程详细介绍了如何使用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免费学习笔记（深入）”；
/* 收据表格的专用样式 */ .receipt { border-collapse: collapse; max-width: 80%; font-family: sans-serif; /* 初始样式，打印时可能需要调整 */ } .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$
JavaScript 实现步骤
接下来是实现打印功能的JavaScript代码。我们将创建一个函数，该函数在被调用时执行以下操作：
获取目标内容并注入打印逻辑首先，获取包含收据的 table 元素。然后，向其内部动态注入一个 标签。这个脚本会在新页面加载完成后执行，首先应用一些额外的打印样式（例如居中），然后调用 window.print() 触发打印。
function printReceipt() { const receiptTable = document.querySelector('.receipt'); // 动态注入用于打印居中的CSS样式，这里通过修改已有的style标签实现 // 注意：这里假设receiptTable内部有一个标签，或者可以直接在receiptTable上添加style属性 const cssCenteringScript = ` const styleTag = document.querySelector('table.receipt > style'); if (styleTag) { styleTag.innerHTML += '.receipt { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; }'; } else { // 如果没有内联style标签，则创建一个并注入 const newStyle = document.createElement('style'); newStyle.innerHTML = '.receipt { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; }'; document.head.appendChild(newStyle); } `; // 注入自动打印的脚本到收据表格内容中 // 注意：这里将脚本直接添加到receiptTable的innerHTML，确保它在新页面中被执行 receiptTable.innerHTML += `window.onload = () => { ${cssCenteringScript}; window.print(); }`; // ... 后续步骤}
构建 Data URI在注入脚本后，获取包含整个 section 的完整HTML内容。然后，使用 encodeURIComponent 对这段HTML字符串进行编码，并前缀 data:text/html, 来构建Data URI。
function printReceipt() { // ... (前面注入脚本的代码) ... const receiptSectionHTML = document.querySelector('.receipt-section').innerHTML; const dataUri = 'data:text/html,' + encodeURIComponent(receiptSectionHTML); // ... 后续步骤}
在新窗口中打开并触发打印最后，使用 window.open() 方法在新标签页或新窗口中打开这个Data URI。由于Data URI中包含了自动打印的脚本，新页面加载后将立即弹出打印对话框。
function printReceipt() { const receiptTable = document.querySelector('.receipt'); const cssCenteringScript = ` const styleTag = document.querySelector('table.receipt > style'); if (styleTag) { styleTag.innerHTML += '.receipt { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; }'; } else { const newStyle = document.createElement('style'); newStyle.innerHTML = '.receipt { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; }'; document.head.appendChild(newStyle); } `; // 保存原始HTML，以便在注入后可以恢复 const originalReceiptTableHTML = receiptTable.innerHTML; receiptTable.innerHTML += `window.onload = () => { ${cssCenteringScript}; window.print(); }`; const receiptSectionHTML = document.querySelector('.receipt-section').innerHTML; const dataUri = 'data:text/html,' + encodeURIComponent(receiptSectionHTML); window.open(dataUri, '_blank'); // 在新标签页中打开并触发打印 // 打印完成后（或者立即），恢复原始HTML，移除注入的脚本 // 注意：由于是新窗口打开，这里立即恢复对当前页面DOM没有影响 receiptTable.innerHTML = originalReceiptTableHTML; }
完整代码示例
将上述步骤整合，并添加一个按钮来触发 printReceipt 函数：
打印特定元素教程 body { font-family: sans-serif; margin: 20px; } .printButton { padding: 10px 20px; font-size: 16px; cursor: pointer; margin-bottom: 20px; } /* 页面其他内容，确保它不会被打印 */ .other-content { background-color: #f0f0f0; padding: 20px; border: 1px solid #ccc; margin-top: 20px; }网页特定元素打印示例
这是页面上的其他内容，不应被打印。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
function printReceipt() { const receiptTable = document.querySelector('.receipt'); // 确保在获取innerHTML之前，将可能需要居中的样式注入到新页面的head中 // 这里的cssCenteringScript会作为字符串被注入到新页面的中执行 const cssCenteringScript = ` const styleTag = document.createElement('style'); styleTag.innerHTML = '.receipt { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; max-width: 80%; width: auto; }'; document.head.appendChild(styleTag); `; // 保存原始HTML，以便在注入后可以恢复 const originalReceiptTableHTML = receiptTable.innerHTML; // 注入自动打印的脚本到收据表格内容中 // 这个脚本会在新打开的Data URI页面中执行 receiptTable.innerHTML += `window.onload = () => { ${cssCenteringScript}; window.print(); };`; const receiptSectionHTML = document.querySelector('.receipt-section').innerHTML; const dataUri = 'data:text/html,' + encodeURIComponent(receiptSectionHTML); window.open(dataUri, '_blank'); // 在新标签页中打开并触发打印 // 恢复原始HTML，移除注入的脚本，避免影响当前页面的DOM // 这一步在window.open之后立即执行，不会影响新打开的Data URI页面 receiptTable.innerHTML = originalReceiptTableHTML; } const button = document.querySelector('.printButton'); button.addEventListener('click', printReceipt); /* 收据表格的专用样式 */ .receipt { border-collapse: collapse; max-width: 80%; /* 原始页面显示时的最大宽度 */ font-family: sans-serif; width: 100%; /* 打印时通常希望宽度占满 */ } .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$
注意事项与优化
浏览器兼容性：window.open() 和 data: URI 在现代浏览器中普遍支持，但某些浏览器可能会有对Data URI长度的限制。对于非常大的HTML内容，这种方法可能不适用。
安全性：使用 window.open() 打开 data: URI 通常被认为是安全的，因为内容是本地生成的。然而，如果Data URI的内容来自不可信的第三方，则可能存在跨站脚本（XSS）风险。在本例中，内容来自当前页面DOM，因此风险较低。
打印样式控制 (@media print)：对于更专业的打印布局，推荐使用CSS的 @media print 媒体查询。通过定义专门的打印样式表，可以精确控制打印时的页面布局、字体大小、隐藏非打印元素等，而无需JavaScript的动态注入。例如：
/* style.css *//* 默认屏幕样式 */.receipt-section { display: block; }.print-button { display: block; }@media print { /* 打印时隐藏所有非收据内容 */ body > *:not(.receipt-section) { display: none; } /* 让收据居中 */ .receipt-section { width: 100%; margin: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* 确保收据表格宽度占满 */ .receipt { width: 100%; max-width: none; /* 移除屏幕样式中的最大宽度限制 */ }}
然后，JavaScript只需调用 window.print() 即可，无需构建Data URI和注入脚本。这种方法通常更健壮和易于维护。本教程介绍的方法是应对特定场景（如需要完全隔离打印内容）的一种灵活变通方案。
用户体验：window.open() 可能会被浏览器的弹窗拦截器阻止，尤其是在用户没有明确交互（如点击按钮）的情况下。确保用户行为触发此函数可以避免此问题。
总结
通过将特定HTML内容封装为Data URI，并巧妙地利用内联JavaScript在新页面加载时触发 window.print()，我们可以实现一种高效且用户友好的局部内容打印解决方案。虽然这种方法在某些方面可能略显“非传统”，但它提供了一种无需复杂DOM操作即可实现局部打印的有效途径。在实际项目中，开发者应根据具体需求权衡其与更标准的 @media print 方案的优劣，选择最适合的实现方式。
以上就是利用JavaScript和Data URI实现网页特定元素打印教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1585091.html
微信扫一扫 
支付宝扫一扫 
