如何在jsPDF生成的PDF表格中添加可点击超链接？

要给jsPDF autoTable生成的表格行/单元格添加可点击超链接，你可以利用autoTable的钩子函数结合jsPDF原生的addLink方法实现，具体如下：

1. 针对指定列添加链接（示例） #

假设你的my_array中，每行最后一列（对应Field7）是需要跳转的URL，修改代码如下：

var doc = new jsPDF('l', 'mm', 'a4');
doc.autoTable({
    startY: 40,
    head: [["Field1","Field2","Field3", "Field4","Field5","Field6","Field7"]],
    body: my_array,
    // 单元格绘制完成后触发的钩子函数
    drawCell: function(data) {
        // 仅处理表格主体的目标列（索引从0开始，这里是第7列对应索引6）
        if (data.section === 'body' && data.column.index === 6) {
            const cell = data.cell;
            // 添加覆盖单元格的可点击链接区域
            doc.addLink({
                x: cell.x,
                y: cell.y,
                w: cell.width,
                h: cell.height,
                url: cell.raw // cell.raw对应my_array中该行的原始URL值
            });
            // 可选：给URL文本添加蓝色下划线，提示可点击
            doc.setDrawColor(0, 0, 255);
            doc.line(cell.x, cell.y + cell.height - 1, cell.x + cell.width, cell.y + cell.height - 1);
        }
    }
});

2. 针对整行添加链接（示例） #

如果需要让整行点击后跳转到指定URL（比如每行的某字段是跳转地址），可修改钩子逻辑：

var doc = new jsPDF('l', 'mm', 'a4');
doc.autoTable({
    startY: 40,
    head: [["Field1","Field2","Field3", "Field4","Field5","Field6","Field7"]],
    body: my_array,
    drawCell: function(data) {
        if (data.section === 'body') {
            const row = data.row;
            // 假设每行第7列（索引6）是跳转URL
            const targetUrl = row.raw[6];
            // 添加覆盖整行的可点击区域
            doc.addLink({
                x: row.x,
                y: row.y,
                w: row.width,
                h: row.height,
                url: targetUrl
            });
        }
    }
});

关键说明 #

• 钩子函数drawCell会在每个单元格绘制完成后触发，适合用来添加链接区域；
• 通过data.cell或data.row可以获取单元格/行的坐标、尺寸和原始数据，确保链接区域精准覆盖目标区域；
• 可选的下划线样式是为了给用户提供视觉提示，明确这是可点击元素。

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