React中使用jsPDF导出表格PDF如何替换操作列添加图片列

你当前直接传入DOM选择器#mytable读取页面表格渲染PDF的方式，无法灵活修改列结构和插入自定义内容，改用手动传入结构化表格数据+AutoTable单元格绘制钩子的方式即可实现需求，具体实现如下：

核心实现步骤 #

• 放弃直接读取DOM表格的配置方式，基于你渲染表格用的原始业务数据构造PDF表格的列配置，直接剔除原操作列，追加自定义图片列
• 构造表体数据时，前7列直接映射业务字段，最后一列留空作为图片占位
• 借助jspdf-autotable提供的didDrawCell生命周期钩子，在图片列对应单元格渲染时，按单元格尺寸绘制当前行关联的图片

可直接复用的代码示例 #

downloadRecords = async (id: string) => {
  const { type } = this.props;
  // 替换为你页面渲染表格实际用的数据源，保证每条数据携带关联图片地址字段
  const { tableData } = this.state;
  const doc = new jsPDF({
    orientation: "landscape"
  });
  const title = `${type}`;
  doc.text(title, 14, 10);

  // 配置PDF表格列：7个业务列 + 1个图片列，完全移除原操作列
  const pdfColumns = [
    { header: "替换为你的业务列1名称", dataKey: "col1" },
    { header: "替换为你的业务列2名称", dataKey: "col2" },
    { header: "替换为你的业务列3名称", dataKey: "col3" },
    { header: "替换为你的业务列4名称", dataKey: "col4" },
    { header: "替换为你的业务列5名称", dataKey: "col5" },
    { header: "替换为你的业务列6名称", dataKey: "col6" },
    { header: "替换为你的业务列7名称", dataKey: "col7" },
    { header: "关联凭证图片", dataKey: "attachImg" }
  ];

  // 构造PDF表体数据，最后一列留空占位
  const pdfBody = tableData.map(row => ({
    col1: row.对应业务字段1,
    col2: row.对应业务字段2,
    col3: row.对应业务字段3,
    col4: row.对应业务字段4,
    col5: row.对应业务字段5,
    col6: row.对应业务字段6,
    col7: row.对应业务字段7,
    attachImg: ""
  }));

  autoTable(doc, {
    columns: pdfColumns,
    body: pdfBody,
    bodyStyles: { minCellHeight: 28 }, // 高度按需调整，保证图片展示完整
    startY: 20,
    // 单元格绘制阶段插入图片
    didDrawCell: (cellInfo) => {
      // 仅处理表体区域、最后一列（图片列）的单元格
      if (cellInfo.section === "body" && cellInfo.column.index === pdfColumns.length - 1) {
        const currentRow = tableData[cellInfo.row.index];
        // 计算图片绘制坐标和尺寸，预留2px内边距避免贴单元格边框
        const padding = 2;
        const imgX = cellInfo.cell.x + padding;
        const imgY = cellInfo.cell.y + padding;
        const imgW = cellInfo.cell.width - padding * 2;
        const imgH = cellInfo.cell.height - padding * 2;
        // 插入当前行关联图片，网络跨域图片建议提前转base64避免渲染失败
        doc.addImage(currentRow.关联图片地址字段, "PNG", imgX, imgY, imgW, imgH);
      }
    }
  });

  doc.save(`${id}.pdf`);
}

注意事项 #

• 如果你的图片是存放在第三方存储的网络地址，建议提前写一个图片转base64的工具方法做预处理，避免跨域导致图片加载失败
• 如果需要保留原DOM表格的部分样式，可以在didParseCell钩子中单独调整单元格样式，不需要回退到直接读取DOM的实现方式
• 图片列的最小单元格高度可以根据你需要的图片展示尺寸调整，避免图片被过度压缩变形

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