如何在Datatables PDF导出中实现分数低于50%时显示红色？

要实现PDF导出时自动给低于50%的分数单元格设置红色，核心是利用Datatables Buttons插件的customize回调，结合pdfmake的样式规则来定制导出内容。具体步骤如下：

1. 确保依赖加载正确 #

首先确认页面已加载以下资源：

• Datatables核心库
• Datatables Buttons插件
• pdfmake库
• pdfmake的字体文件（vfs_fonts.js）

2. 配置Datatables的导出按钮 #

在初始化Datatables时，给PDF导出按钮添加自定义逻辑：

$('#student-scores').DataTable({
  // 你的表格基础配置（列定义、数据源等）
  columns: [
    { data: 'name', title: '学生姓名' },
    { data: 'score', title: '分数' }
  ],
  buttons: [
    {
      extend: 'pdfHtml5',
      text: '导出PDF',
      exportOptions: {
        // 可选：指定要导出的列，默认导出所有可见列
        columns: ':visible'
      },
      customize: function(doc) {
        // 遍历PDF文档中的表格数据体
        doc.content[1].table.body.forEach(function(row) {
          row.forEach(function(cell) {
            // 处理分数单元格：移除%符号并转为数字
            const scoreValue = parseFloat(cell.text.replace('%', ''));
            // 判断分数是否低于50%
            if (!isNaN(scoreValue) && scoreValue < 50) {
              // 设置文字颜色为红色
              cell.color = '#ff0000';
            }
          });
        });
      }
    }
  ],
  dom: 'Bfrtip' // 显示导出按钮
});

关键代码说明 #

• customize回调会在PDF文档生成前触发，可直接修改pdfmake的文档结构
• doc.content[1].table.body对应导出表格的数据区域（content[0]通常是导出标题）
• 针对带%的分数，先移除符号再转数字，避免判断逻辑出错
• 若分数列是纯数字（无%），直接用parseFloat(cell.text)即可

精准定位分数列的优化 #

如果只需处理指定列（比如第二列是分数列），可以通过索引精准操作，避免遍历所有单元格：

doc.content[1].table.body.forEach(function(row) {
  // 仅处理第二列（索引从0开始计数）
  const cell = row[1];
  const scoreValue = parseFloat(cell.text.replace('%', ''));
  if (!isNaN(scoreValue) && scoreValue < 50) {
    cell.color = '#ff0000';
  }
});

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