使用jsPDF与jsPDF autotable生成PDF时出现空白页问题求助

嘿，我瞅了你的代码，发现一个核心问题——列配置和数据字段不匹配，这几乎肯定是生成空白PDF的原因！

问题根源 #

你的columns数组定义的是表头显示文本：["Name", "Cellphone", "Work Phone"]，但rows里的对象键却是employeename、cell_phone、work_phone。jsPDF-autotable默认会尝试用列名去匹配数据对象的键，两者完全不对应时，表格无法渲染任何内容，最终输出的就是空白页。

修复方案（二选一） #

方案1：给列配置添加dataKey关联数据字段

这种方式可以保留自定义表头，同时正确关联数据：

var columns = [
  { title: "Name", dataKey: "employeename" },
  { title: "Cellphone", dataKey: "cell_phone" },
  { title: "Work Phone", dataKey: "work_phone" }
];

方案2：让列名直接匹配数据字段

如果不介意表头显示字段名，可以直接把列名改成和数据键一致：

var columns = ["employeename", "cell_phone", "work_phone"];

额外排查点 #

如果修改后还是空白，可以检查这几点：

• 确认jsPDF和jsPDF-autotable的版本兼容，建议使用最新稳定版，避免版本冲突。
• 检查脚本引入顺序：必须先引入jsPDF，再引入jsPDF-autotable，顺序错误会导致autotable无法挂载到jsPDF实例上。
• 打印rows结构确认数据：在生成PDF前执行console.log(rows[0])，确保每个对象的键和你配置的columns完全对应。

修改后的完整代码示例 #

$scope.export = function(){ 
  var columns = [
    { title: "Name", dataKey: "employeename" },
    { title: "Cellphone", dataKey: "cell_phone" },
    { title: "Work Phone", dataKey: "work_phone" }
  ]; 
  var rows = []; 
  for (var i = 0; i < $scope.data.length; i++) { 
    rows.push({ 
      employeename: $scope.data[i].employeename, 
      cell_phone: $scope.data[i].cell_phone, 
      work_phone: $scope.data[i].work_phone
    }); 
  } 
  var doc = new jsPDF('p', 'pt'); 
  doc.autoTable(columns, rows); 
  doc.save('jspdf-test312.pdf'); 
}

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