JSPDF换行处理及React动态表格分页重复前3列的方法咨询

实现你需要的长列分页、每页重复前3列的效果，核心依赖jspdf-autotable内置的固定列、横向分页配置即可完成，修改调整如下：

核心配置说明 #

• 确认jspdf-autotable版本在v3.5及以上，内置的fixedColumns参数可直接指定横向分页时固定重复的左侧列数量
• 开启horizontalPageBreak: true实现列总宽度超出页面宽度时自动横向分页
• 修正原有代码属性拼写错误：maxCellwidth改为标准写法maxCellWidth

修改后完整代码 #

doc.autoTable({
    head: [this.state.headerRelatorio.map(element => element)],
    headerStyles: {
        lineWidth: 1,
        lineColor: [0, 0, 0]
    },
    body : this.state.body.map(element=> this.state.headerRelatorio.map(elem => {
        return element[elem] === undefined ? 0 : element[elem];
    })),
    // 开启横向自动分页
    horizontalPageBreak: true,
    // 固定左侧前3列，每页重复展示
    fixedColumns: { left: 3 },
    // 旧版本兼容配置，指定前3列索引重复展示
    horizontalPageBreakRepeat: [0,1,2],
    overflow: 'linebreak',
    styles: {
        font: 'arial',
        fontSize:8,
        minCellWidth: 70,
        minCellHeight: 20,
        maxCellWidth:30,
        halign: 'center',
        valign:'middle',
        border: 1,
        lineWidth: 1,
        lineColor: [0, 0, 0],
        overflow: 'linebreak'
    },
    theme:'grid',
    startY: 150,
})

注意事项 #

• 请调整前3列的minCellWidth数值，保证3列总宽度小于单页可打印宽度，避免布局错乱
• 若需要自定义分页后的表格起始位置，可通过didDrawPage钩子监听分页事件，修改autoTable.previous.finalY参数调整Y轴偏移量

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