如何在jQuery中使用HTML表格并实现含表格内容的打印页脚

嘿，我来帮你实现用jQuery打印HTML表格数据，同时配置包含表格文本和“Total in Words”的自定义页脚需求，用printThis插件就能轻松搞定！

核心实现步骤 #

• 确保项目里已经引入了jQuery和printThis插件（可以下载到本地引入，或者使用公共CDN资源）
• 通过printThis的配置项，自定义打印页脚，动态获取目标元素的实时文本内容

完整代码示例 #

1. HTML表格与相关元素结构 #

<!-- 表格标题容器 -->
<div id="table">
  <h3>员工薪资统计表</h3>
</div>

<!-- 大写金额容器 -->
<div id="txtWord">
  <p>Total in Words: TWO THOUSAND THREE HUNDRED</p>
</div>

<!-- 待打印的核心表格 -->
<table id="tabledata" border="1" cellpadding="8" cellspacing="0">
  <thead>
    <tr>
      <th>Sl.No</th>
      <th>Emp Name</th>
      <th>Emp ID</th>
      <th>Department</th>
      <th>Monthly Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mike Taylor</td>
      <td>E007</td>
      <td>Product Design</td>
      <td>$8500</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Lisa Anderson</td>
      <td>E012</td>
      <td>Human Resources</td>
      <td>$6200</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Kevin Moore</td>
      <td>E023</td>
      <td>Finance</td>
      <td>$8600</td>
    </tr>
  </tbody>
</table>

<!-- 打印触发按钮 -->
<button id="printTableBtn">打印表格数据</button>

2. JavaScript配置逻辑（jQuery + printThis） #

$(document).ready(function() {
  $('#printTableBtn').click(function() {
    // 针对#tabledata表格执行打印操作
    $('#tabledata').printThis({
      // 自定义打印页脚：动态获取元素内容
      footer: function() {
        const tableTitle = $('#table').text().trim();
        const totalWords = $('#txtWord').text().trim();
        // 返回带样式的页脚HTML，保证打印排版美观
        return `<div style="text-align:center; margin-top:30px; font-size:14px; font-weight:600;">${tableTitle}<br>${totalWords}</div>`;
      },
      // 可选配置项
      importCSS: true, // 引入页面现有CSS样式，保持打印样式和页面一致
      printDelay: 400, // 延迟打印时间，确保内容加载完成
      header: null, // 关闭默认表头，如需自定义可传入HTML字符串
      loadCSS: './print-styles.css' // 可单独引入打印专属样式文件（可选）
    });
  });
});

关键细节说明 #

• 动态页脚生成：用函数返回页脚内容，能实时获取#table和#txtWord的最新文本，避免静态内容的局限性
• 样式适配：通过内联样式或单独的打印样式文件，可自定义打印内容的排版、字体等，让打印效果更符合需求
• printThis特性：importCSS参数会自动把页面上的CSS应用到打印内容中，不用重复写样式

点击“打印表格数据”按钮后，就能直接打印出表格内容，同时页脚会显示你需要的表格标题和大写金额文本啦！

内容的提问来源于stack exchange，提问作者Beta