PDFmake长文本跨页问题求助：如何避免表格内长文本换页

问题分析 #

你当前代码中已经设置了dontBreakRows: true来阻止表格行跨页，但表格宽度配置与列数不匹配（每行1列却设置了3个宽度值），这会导致布局错乱，进而引发长文本跨页的问题。

解决方案 #

1. 修正表格宽度配置

将表格的widths属性修改为与列数匹配的数组，因为你的表格每行仅1列，所以改为：

widths: ['*']

这个配置会让表格列自动适配页面宽度，避免布局异常。

2. 优化长文本单元格设置

给长文本所在的单元格添加明确的换行配置，确保文本在单元格内合理换行而非跨页：

[{ 
  text: `你的长文本内容`, 
  border: [true, false, true, false],
  noWrap: false, // 允许文本在单元格内换行
  alignment: 'justify' // 可选，让文本两端对齐，提升可读性
}]

3. 可选：强制表格从新页面开始

如果表格位置接近页面底部，仍可能被拆分，可添加pageBreakBefore属性强制表格在新页面渲染：

return [{
  pageBreakBefore: () => true,
  table: {
    dontBreakRows: true,
    widths: ['*'],
    body: conteudo
  }
}];

修改后的完整代码片段 #

private dadosTotalizacao(rcms: Rcms): {}[] {
    let valor_total = 0;
    let menor_global = 0;

    for (let item of rcms.itens) {
      let menor = 0
      let qntCotaValidas = 0
      let valorSomadoCotaValidas = 0

      if (item.cotacoes && item.cotacoes.length > 0) {
        let cotacao_ordenada = item.cotacoes
          .sort((a, b) => a.valor_unitario <= 0 ? -1 : (a.valor_unitario - b.valor_unitario))
        menor = cotacao_ordenada.find(a => a.valor_unitario > 0).valor_unitario
      }
      menor_global += +menor * +item.quantidade;

      item.cotacoes.map(cotacao => {
        if (cotacao.valor_unitario && +cotacao.valor_unitario > 0) {
          qntCotaValidas++
          valorSomadoCotaValidas += +cotacao.valor_unitario * +item.quantidade
        }
      })

      valor_total += +valorSomadoCotaValidas / +qntCotaValidas
    }

    const conteudo: any[] = [
      [{
        text: `APURAÇÃO TOTAL DE MENOR CUSTO:  R$        ${this.funcaoService.convertToBrNumber(menor_global)}`,
        border: [true, false, true, false], bold: true
      },],
      [{
        text: `APURAÇÃO TOTAL DE CUSTO MÉDIO:  R$        ${this.funcaoService.convertToBrNumber(valor_total)}`,
        border: [true, false, true, false], bold: true
      },],
      [{ text: `Observação:`, border: [true, false, true, false], margin: [0, 0, 0, 0] }],
      [{ 
        text: `你的长文本内容`, 
        border: [true, false, true, false],
        noWrap: false,
        alignment: 'justify'
      }]
    ];

    return [{
      pageBreakBefore: () => true,
      table: {
        dontBreakRows: true,
        widths: ['*'],
        body: conteudo
      }
    }];
  }

当前布局截图 #

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