Angular中实现jspdf打印时如何为指定列添加上下边框？

一、指定列添加上下边框 #

如果使用jspdf-autotable插件（表格打印的常用工具），可以通过钩子函数精准控制指定列的边框样式，示例代码如下：

import jsPDF from 'jspdf';
import autoTable from 'jspdf-autotable';

const generatePDF = () => {
  const doc = new jsPDF();
  // 表格列与数据
  const columns = ['序号', '项目', '金额', '备注'];
  const data = [
    [1, '办公用品', '120.00', ''],
    [2, '差旅费', '850.00', ''],
    [3, '合计', '970.00', '']
  ];

  autoTable(doc, {
    columns,
    data,
    didParseCell: (hookData) => {
      // 定位金额列（索引为2，根据实际列顺序调整）
      if (hookData.column.index === 2) {
        const cell = hookData.cell;
        // 清除默认边框（可选，避免重复）
        cell.styles.border = 'none';
        // 添加上边框
        doc.line(cell.x, cell.y, cell.x + cell.width, cell.y);
        // 添加下边框
        doc.line(cell.x, cell.y + cell.height, cell.x + cell.width, cell.y + cell.height);
        // 可自定义边框样式：粗细、颜色
        doc.setLineWidth(0.4);
        doc.setDrawColor('#333');
      }
    }
  });

  doc.save('打印文件.pdf');
};

二、实现金额下划线样式 #

针对示例中部分金额（如合计行）的下划线效果，可在didDrawCell钩子中手动绘制下划线，精准匹配文本位置：

// 延续上述代码，在autoTable配置中添加didDrawCell钩子
autoTable(doc, {
  // ... 其他配置
  didDrawCell: (hookData) => {
    // 定位合计行的金额列（假设最后一行为合计行）
    if (hookData.row.index === data.length - 1 && hookData.column.index === 2) {
      const cell = hookData.cell;
      const textContent = cell.text[0]; // 假设单元格为单行文本
      const textWidth = doc.getTextDimensions(textContent).w;
      const textX = cell.x + cell.padding('left');
      // 计算下划线位置：文本下方2px处（可根据字体大小调整）
      const underlineY = cell.y + cell.padding('top') + doc.getTextDimensions(textContent).h + 2;
      
      // 绘制下划线
      doc.setLineWidth(0.3);
      doc.setDrawColor('#000');
      doc.line(textX, underlineY, textX + textWidth, underlineY);
    }
  }
});

额外建议 #

• 若不使用jspdf-autotable，手动绘制表格时需自行计算每个单元格的坐标，逻辑与上述一致：遍历数据定位指定列，调用line方法绘制边框和下划线。
• 调整setLineWidth和setDrawColor参数可匹配不同的边框/下划线样式，比如示例中的细下划线。
• 处理多行文本时，需遍历cell.text数组，为每一行文本单独绘制下划线。
• 建议封装打印逻辑为Angular服务，将表格配置、样式规则抽离，便于多个组件复用。

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