使用JavaScript将特定HTML元素打印为PDF或纸张的教程-html教程-PHP中文网

使用JavaScript将特定HTML元素打印为PDF或纸张的教程

心靈之曲

发布： 2025-10-16 10:47:34

原创

265人浏览过

使用JavaScript将特定HTML元素打印为PDF或纸张的教程

本教程详细介绍了如何使用javascript将网页中的特定html元素（如电商收据）高效地打印为pdf或纸张。通过将目标html内容封装并转换为`data:text/html` uri，我们可以在新窗口中隔离显示并自动触发打印功能，避免了传统隐藏/显示方法的复杂性，确保打印内容的准确性和独立性，并提供了代码示例及注意事项。

在现代Web应用开发中，经常会遇到需要打印网页特定部分的需求，例如打印电商订单的收据、报告中的某个图表或用户生成的证书。传统的做法可能是通过JavaScript动态隐藏页面上不需要打印的所有元素，只显示目标内容，然后调用window.print()。然而，这种方法不仅操作复杂，容易出错，而且在隐藏和重新显示内容时可能会导致页面闪烁或布局混乱，用户体验不佳。

核心策略：基于Data URI的内容隔离打印

为了解决上述问题，我们可以采用一种更优雅、更可靠的方法：利用data:text/html URI在新窗口中隔离并打印特定HTML元素。这种方法的原理是将需要打印的HTML内容及其相关样式作为数据直接嵌入到一个URI中，然后使用window.open()在新标签页中打开这个URI。由于新标签页只包含我们指定的HTML内容，因此可以实现完全隔离的打印效果，且不会影响原始页面的布局和状态。

HTML结构准备：确保内容可独立渲染

首先，为了确保目标内容能够独立打印并保持其样式，我们需要对其HTML结构进行适当的封装，并确保所有必要的CSS样式都随其一同被渲染。这意味着最好将目标元素包裹在一个独立的容器中，并将其相关的样式内联或嵌入到该容器内部。

以下是一个电商收据的HTML和CSS示例，我们将它封装在一个<section>标签内：

立即学习“Java免费学习笔记（深入）”；

<section class="receipt-section">
  <table class="receipt">
    <style>
      /* 收据的CSS样式 */
      .receipt {
        border-collapse: collapse;
        max-width: 80%; /* 示例：打印时可能需要调整宽度 */
        font-family: sans-serif;
        margin: 20px auto; /* 居中显示 */
      }

      .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>

登录后复制

注意： 将<style>标签直接嵌入到<table>内部或<body>内部是关键，因为外部CSS文件在新创建的data: URI页面中将无法加载。

JavaScript实现：动态生成并打印

接下来，我们将编写JavaScript函数来执行打印逻辑。这个函数将：

获取包含收据的HTML内容。
在获取的HTML中动态注入一个<script>标签，该脚本在新页面加载完成后自动调用window.print()。
（可选）注入额外的CSS样式以调整打印布局，例如居中显示收据。
将处理后的HTML内容编码为data:text/html URI。
在新窗口中打开这个URI。

function printReceipt() {
  // 1. 获取包含收据的根元素
  const receiptSection = document.querySelector('.receipt-section');

  // 2. 准备动态注入的CSS，用于在打印前居中收据
  // 注意：这里的CSS字符串需要进行转义
  const centeringCSS = `
    .receipt {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      margin: 0; /* 移除原有的margin，避免冲突 */
    }
  `;

  // 3. 在收据HTML内容中注入一个脚本，使其在新页面加载后自动打印
  // 同时，在新页面加载后，将居中CSS添加到内联样式中
  const autoPrintScript = `
    <script>
      window.onload = () => {
        const styleTag = document.querySelector('.receipt > style');
        if (styleTag) {
          styleTag.innerHTML += \`${centeringCSS}\`; // 注入居中样式
        }
        window.print(); // 自动触发打印
      };
    </script>
  `;

  // 4. 获取收据的完整HTML内容，并追加自动打印脚本
  let receiptHTML = receiptSection.innerHTML + autoPrintScript;

  // 5. 将HTML内容编码为Data URI
  // encodeURIComponent 用于确保所有特殊字符都被正确编码，防止URI损坏
  const URI = 'data:text/html,' + encodeURIComponent(receiptHTML);

  // 6. 在新空白页面中打开Data URI，触发打印
  window.open(URI, '_blank');
}

登录后复制

触发打印功能：绑定事件

最后，我们需要将上述printReceipt函数绑定到一个页面元素（例如一个按钮）的点击事件上，以便用户可以手动触发打印。

壁纸样机神器

免费壁纸样机生成

查看详情

// 假设你有一个ID为 'printButton' 的按钮
const button = document.querySelector('.printButton');
if (button) {
  button.addEventListener('click', printReceipt);
} else {
  console.error("未找到打印按钮，请检查HTML中是否存在 class 为 'printButton' 的元素。");
}

登录后复制

在HTML中，你可以这样定义你的打印按钮：

<button class="printButton">打印收据</button>

登录后复制

注意事项与最佳实践

样式管理：
- 内联/嵌入样式是关键： 由于data:text/html URI是在一个完全独立的上下文（新窗口）中加载的，它无法访问原始页面的外部CSS文件。因此，所有必要的样式都必须以内联（style属性）或嵌入（<style>标签）的方式包含在要打印的HTML内容中。
- 响应式打印： 考虑使用CSS的@media print规则来为打印输出专门优化样式。虽然在这里我们是生成一个全新的页面，但@media print仍然可以放在嵌入的<style>标签中，以控制打印时的布局、字体大小、隐藏非必要元素（如页眉页脚、导航栏等）。
内容完整性：
- 确保所有依赖的资源（如图片、字体图标）在新窗口中也能正确加载。对于图片，最好使用base64编码直接嵌入到HTML中，或者使用绝对路径确保其可访问性。
- 只包含真正需要打印的内容。避免将整个页面的HTML复制过去，这会增加URI的长度并可能导致性能问题。
用户体验：
- 当window.open()被调用时，浏览器会打开一个新的标签页或窗口。用户可能会看到这个新窗口短暂地出现，然后打印对话框弹出。这是一个正常的流程，但需要告知用户。
- 某些浏览器可能会阻止未经用户交互而弹出的新窗口（例如，如果printReceipt函数不是直接由用户点击事件触发）。始终确保打印功能与用户交互紧密关联。
替代方案简述（CSS媒体查询）：
- 对于不需要完全隔离，只是想在打印时改变现有页面布局的情况，CSS的@media print媒体查询是一个更直接的选择。它允许你为打印输出定义一套不同的CSS规则，例如隐藏导航栏、调整字体大小、改变颜色等，而无需创建新的HTML内容。然而，@media print无法像data:text/html方法那样实现完全的内容隔离。

总结

通过利用data:text/html URI，我们能够有效地将网页中的特定HTML元素隔离出来，并在一个全新的、独立的环境中进行打印。这种方法避免了传统动态隐藏/显示元素的复杂性和潜在问题，提供了一种更清晰、更专业的解决方案，尤其适用于生成收据、报告等需要精确控制打印内容的场景。遵循上述步骤和注意事项，可以构建出健壮且用户友好的打印功能。

以上就是使用JavaScript将特定HTML元素打印为PDF或纸张的教程的详细内容，更多请关注php中文网其它相关文章！