利用JavaScript和Data URI实现网页特定元素打印教程

DDD

发布时间：2025-10-16 12:21:12

560人浏览过

来源于php中文网

原创

利用JavaScript和Data URI实现网页特定元素打印教程

本教程详细介绍了如何使用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免费学习笔记（深入）”；

<section class="receipt-section">
    <table class="receipt">
      <style>
        /* 收据表格的专用样式 */
        .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
        }
      </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>

JavaScript 实现步骤

接下来是实现打印功能的JavaScript代码。我们将创建一个函数，该函数在被调用时执行以下操作：

获取目标内容并注入打印逻辑 首先，获取包含收据的 table 元素。然后，向其内部动态注入一个 <script> 标签。这个脚本会在新页面加载完成后执行，首先应用一些额外的打印样式（例如居中），然后调用 window.print() 触发打印。

function printReceipt() {
  const receiptTable = document.querySelector('.receipt');
  // 动态注入用于打印居中的CSS样式，这里通过修改已有的style标签实现
  // 注意：这里假设receiptTable内部有一个<style>标签，或者可以直接在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 += `<script>window.onload = () => { ${cssCenteringScript}; window.print(); }</script>`;

  // ... 后续步骤
}

构建 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 += `<script>window.onload = () => { ${cssCenteringScript}; window.print(); }</script>`;

  const receiptSectionHTML = document.querySelector('.receipt-section').innerHTML;
  const dataUri = 'data:text/html,' + encodeURIComponent(receiptSectionHTML);

  window.open(dataUri, '_blank'); // 在新标签页中打开并触发打印

  // 打印完成后（或者立即），恢复原始HTML，移除注入的脚本
  // 注意：由于是新窗口打开，这里立即恢复对当前页面DOM没有影响
  receiptTable.innerHTML = originalReceiptTableHTML; 
}

完整代码示例

将上述步骤整合，并添加一个按钮来触发 printReceipt 函数：

Napkin AI

Napkin AI 可以将您的文本转换为图表、流程图、信息图、思维导图视觉效果，以便快速有效地分享您的想法。

下载

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打印特定元素教程</title>
    <style>
        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;
        }
    </style>
</head>
<body>

    <h1>网页特定元素打印示例</h1>
    <button class="printButton">打印收据</button>

    <div class="other-content">
        这是页面上的其他内容，不应被打印。
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>

    <section class="receipt-section">
        <table class="receipt">
          <style>
            /* 收据表格的专用样式 */
            .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
            }
          </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>

    <script>
        function printReceipt() {
            const receiptTable = document.querySelector('.receipt');

            // 确保在获取innerHTML之前，将可能需要居中的样式注入到新页面的head中
            // 这里的cssCenteringScript会作为字符串被注入到新页面的<script>中执行
            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 += `<script>window.onload = () => { ${cssCenteringScript}; window.print(); };<\/script>`;

            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);
    </script>

</body>
</html>

注意事项与优化

浏览器兼容性：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 方案的优劣，选择最适合的实现方式。

如何让文字精准居中显示在图片正上方（CSS 布局精解）

如何正确控制带边框元素的实际宽度（避免 border-right 溢出）

如何使用 CSS 正确设置 HTML 输入框 placeholder 的颜色

如何正确分离页脚与主体内容，避免背景和边框塌陷问题

如何精准控制文本与图像的垂直对齐关系（避免 margin 干扰布局）