jsPDF导出CSS类样式失效问题排查，及CSS类检查与ID添加咨询

一、PDF导出背景色不生效的修复 #

jsPDF（包括配合html2canvas的导出场景）不会自动读取CSS类定义的背景样式，得手动处理，两种可行方式：

方式1：生成PDF表格时手动映射样式 #

先遍历合并后的表格行，识别类名后给PDF行设置背景色：

// 提取合并后表格的行数据
const tableRows = document.querySelectorAll('.merged-table tr');
const pdfBodyData = [];

tableRows.forEach(row => {
  // 提取单元格文本
  const cellTexts = Array.from(row.querySelectorAll('td')).map(cell => cell.textContent);
  let bgColor = null;

  // 根据类名匹配背景色（用RGB值或十六进制都可以）
  if (row.classList.contains('billable')) {
    bgColor = [192, 230, 192]; // 对应你的绿色背景
  } else if (row.classList.contains('nonbillable_row')) {
    bgColor = [192, 210, 230]; // 对应你的蓝色背景
  }

  pdfBodyData.push({
    content: cellTexts,
    fillColor: bgColor
  });
});

// 生成PDF
const doc = new jsPDF();
doc.autoTable({
  head: [/* 这里填你的表头数组，比如['日期','项目','时长'] */],
  body: pdfBodyData
});
doc.save('timesheets.pdf');

方式2：转内联样式再导出（适合html2canvas转图片的场景） #

如果是先把DOM转成图片再导出，html2canvas对外部CSS支持有限，可提前把类样式转为内联样式：

// 导出前批量转内联样式
document.querySelectorAll('.billable').forEach(el => {
  el.style.backgroundColor = '#c0e6c0'; // 替换成你.billable类的绿色值
});
document.querySelectorAll('.nonbillable_row').forEach(el => {
  el.style.backgroundColor = '#c0d2e6'; // 替换成你.nonbillable_row类的蓝色值
});

// 之后执行html2canvas和jsPDF导出逻辑

二、检查元素是否包含指定CSS类 #

用原生JS的classList.contains()方法直接判断，示例：

// 选中目标元素
const targetRow = document.querySelector('tr');
// 检查是否有.billable类
if (targetRow.classList.contains('billable')) {
  // 这里写符合条件的逻辑
}

三、能否给相关元素加ID？ #

完全可以，而且非常推荐，能大幅提升DOM操作的效率和准确性。在Razor里生成行时直接加唯一ID即可：

@foreach (var entry in timesheetset1)
{
  <tr id="timesheet-1-row-@entry.Id" class="@(entry.IsBillable ? "billable" : "nonbillable_row")">
    <!-- 单元格内容 -->
  </tr>
}

同理，timesheetset2到timesheetset6可以把ID里的1换成对应数字，保证每个行ID唯一。

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