如何基于给定图片创建自定义jsPDF？求代码及问题解决方法

以下是一套不依赖autoTable组件的jsPDF实现方案，可解决数据显示错误、单页限制及内容重叠问题，你可以根据目标图片的样式调整参数：

核心实现思路 #

• 固定每页可显示数据行数，提前计算分页数量
• 绘制前检查当前Y坐标是否超出页面底部，自动触发分页并重新绘制表头
• 严格控制文本绘制坐标，避免内容重叠

完整代码示例 #

// 初始化jsPDF实例，A4纵向页面
const doc = new jsPDF('p', 'mm', 'a4');
// 页面基础参数
const pageWidth = doc.internal.pageSize.getWidth();
const pageHeight = doc.internal.pageSize.getHeight();
const margin = 15; // 页面边距
const headerHeight = 10; // 表头高度
const rowHeight = 8; // 每行数据高度
const maxRowsPerPage = Math.floor((pageHeight - margin * 2 - headerHeight) / rowHeight); // 每页最大可显示数据行数

// 模拟目标数据（请替换为你的实际数据）
const tableData = [
  { id: 1, name: "张三", age: 25, department: "技术部" },
  { id: 2, name: "李四", age: 30, department: "市场部" },
  { id: 3, name: "王五", age: 28, department: "人事部" },
  { id: 4, name: "赵六", age: 32, department: "财务部" },
  { id: 5, name: "孙七", age: 26, department: "技术部" },
  { id: 6, name: "周八", age: 35, department: "市场部" },
  { id: 7, name: "吴九", age: 29, department: "人事部" },
  { id: 8, name: "郑十", age: 31, department: "财务部" },
  { id: 9, name: "冯十一", age: 27, department: "技术部" },
  { id: 10, name: "陈十二", age: 33, department: "市场部" },
  { id: 11, name: "褚十三", age: 34, department: "人事部" },
];

// 绘制表头函数
function drawHeader(yPos) {
  // 设置表头字体样式
  doc.setFontSize(12);
  doc.setFont("helvetica", "bold");
  // 绘制表头文本（根据目标图片的列数和宽度调整）
  doc.text("ID", margin, yPos);
  doc.text("姓名", margin + 30, yPos);
  doc.text("年龄", margin + 70, yPos);
  doc.text("部门", margin + 100, yPos);
  // 绘制表头下划线
  doc.line(margin, yPos + 2, pageWidth - margin, yPos + 2);
}

// 绘制单行数据函数
function drawRow(data, yPos) {
  doc.setFontSize(11);
  doc.setFont("helvetica", "normal");
  doc.text(data.id.toString(), margin, yPos);
  doc.text(data.name, margin + 30, yPos);
  doc.text(data.age.toString(), margin + 70, yPos);
  doc.text(data.department, margin + 100, yPos);
}

// 开始分页绘制
let currentY = margin + headerHeight; // 初始Y坐标（表头下方）

// 先绘制第一页表头
drawHeader(margin);

// 循环处理所有数据
tableData.forEach((item, index) => {
  // 检查是否需要分页
  if (index !== 0 && index % maxRowsPerPage === 0) {
    doc.addPage();
    currentY = margin + headerHeight;
    // 新页面绘制表头
    drawHeader(margin);
  }
  // 绘制当前行数据
  drawRow(item, currentY);
  currentY += rowHeight;
});

// 保存PDF
doc.save("custom-table.pdf");

关键调整点 #

• 根据目标图片的列数、列宽、字体大小，修改drawHeader和drawRow中的文本坐标
• 调整margin、headerHeight、rowHeight参数适配目标样式
• 如果需要添加边框或背景色，可使用doc.rect()方法绘制矩形

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