打印HTML表格出现Undefined错误的原因及数据库关联表格打印方法

你遇到的undefined错误核心原因是document.getElementsByClassName()接口返回的是HTMLCollection类数组集合，而非单个DOM元素：

• 哪怕页面内只有一个对应类名的元素，也需要通过下标[0]取到集合内的第一个DOM节点，才能访问innerHTML属性，集合本身没有该属性，所以取值为undefined。
• 你原有实现直接替换整个document.body.innerHTML还有隐藏问题：会清空页面所有元素原本绑定的JS事件，打印完成后页面上其他交互功能都会失效。

只需要修改取值逻辑即可解决报错：

function printDiv(tableview) {
  // 加[0]取第一个匹配的类名元素
  var printContents = document.getElementsByClassName(tableview)[0].innerHTML;
  var originalContents = document.body.innerHTML;

  document.body.innerHTML = printContents;
  window.print();
  document.body.innerHTML = originalContents;
  // 刷新页面恢复原有事件（可选，避免事件丢失问题）
  window.location.reload();
}

你的表格是PHP从数据库读取后直接渲染到页面的，以下方案都不需要额外请求后端数据，兼容性更强：

方案1：打印媒体查询（最推荐） #

无需修改JS逻辑，只需要加专属打印的CSS样式，把不需要打印的元素（比如打印按钮、导航、侧边栏等）隐藏即可，完全不影响页面原有交互：

@media print {
  /* 隐藏所有不需要打印的元素 */
  .printBtn, header, footer, nav, aside {
    display: none !important;
  }
  /* 优化表格打印样式 */
  .tableview {
    width: 100%;
  }
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid #333;
    padding: 8px;
  }
}

对应JS可以简化为：

function printDiv() {
  window.print();
}

方案2：临时iframe打印 #

不想修改全局样式的场景可以用，创建隐藏iframe加载要打印的内容，完全不影响当前页面的DOM和事件：

function printDiv(tableClass) {
  // 取表格的完整DOM内容
  const printContent = document.querySelector(`.${tableClass}`).outerHTML;
  // 创建隐藏iframe
  const printIframe = document.createElement('iframe');
  printIframe.style.cssText = 'position:absolute;width:0;height:0;border:0;left:-9999px;top:-9999px';
  document.body.appendChild(printIframe);

  const iframeDoc = printIframe.contentDocument || printIframe.contentWindow.document;
  // 写入打印内容和样式
  iframeDoc.write(`
  <html>
  <head>
    <style>
      table {border-collapse: collapse;width: 100%;}
      th,td {border:1px solid #000;padding: 8px;text-align: left;}
    </style>
  </head>
  <body>${printContent}</body>
  </html>
  `);
  iframeDoc.close();

  // 触发打印后移除iframe
  printIframe.contentWindow.focus();
  printIframe.contentWindow.print();
  setTimeout(() => document.body.removeChild(printIframe), 100);
}

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