如何在Crabbly的print.js中修改原始HTML的表格结构

print.js 没有内置表格行列过滤的配置项，可以通过临时修改打印目标DOM的方式实现需求，具体操作有两种常用方案： #

方案1：克隆目标表格修改后打印（推荐，不会影响页面原表格展示） #

操作逻辑是先克隆需要打印的表格副本，在副本上完成行列的增删改，再将副本传给print.js执行打印，打印完成后销毁临时副本即可，不会对页面原有表格产生任何影响。
示例代码：

// 替换为你的表格实际选择器
const originTable = document.querySelector('#target-table')
// 深度克隆表格
const tempPrintTable = originTable.cloneNode(true)
// 给临时表格设置唯一id，隐藏避免页面闪烁
tempPrintTable.id = 'temp-print-table'
tempPrintTable.style.display = 'none'
document.body.appendChild(tempPrintTable)

// --- 开始自定义修改表格 ---
// 1. 删除首列：遍历所有行，移除第一个单元格
tempPrintTable.querySelectorAll('tr').forEach(row => {
  row.firstElementChild?.remove()
})
// 2. 删除指定列（比如第3列，下标从0开始）
const targetColIndex = 2
tempPrintTable.querySelectorAll('tr').forEach(row => {
  const cells = row.querySelectorAll('th, td')
  cells[targetColIndex]?.remove()
})
// 3. 删除指定行（比如第2行，下标从0开始）
const targetRowIndex = 1
const allRows = tempPrintTable.querySelectorAll('tr')
allRows[targetRowIndex]?.remove()
// 4. 修改指定单元格内容示例
// allRows[0].querySelectorAll('th')[1].innerText = '修改后的表头'

// 调用print.js打印
printJS({
  printable: 'temp-print-table',
  type: 'html',
  // 打印资源加载完成后销毁临时节点
  onLoadingEnd: () => {
    document.querySelector('#temp-print-table').remove()
  }
})

方案2：通过打印媒体查询CSS控制显示 #

给需要隐藏的行/列提前加标识类，通过@media print规则控制打印时隐藏，适合固定需要隐藏某些行列的场景：

1. 先加全局样式

@media print {
  .print-hide {
    display: none !important;
  }
}

2. 打印前给需要隐藏的行列加类，打印完成后移除

// 打印前给首列加隐藏类
document.querySelectorAll('#target-table tr > *:first-child').forEach(el => {
  el.classList.add('print-hide')
})
// 调用打印
printJS({
  printable: 'target-table',
  type: 'html',
  onPrintDialogClose: () => {
    // 打印弹窗关闭后移除隐藏类，恢复原表格展示
    document.querySelectorAll('.print-hide').forEach(el => {
      el.classList.remove('print-hide')
    })
  }
})

如果需要修改单元格内容、调整样式，直接在临时克隆的表格节点上操作即可，灵活度更高。

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