Atualmente minha ferramenta está em beta fechado, mas detalhando mais, funciona da seguinte forma. Criei um componente react com a exata medida de cada página e o atributo pdf-page (pdf-page h-[506px] w-[900px]). Em seguida, criei uma página que funciona como um preview, onde junto os 30 componentes (um por página) e tem um botão para fazer a "magia".

 const generatePDF = async () => {
    setSaving(true);
    const reportContent = document.querySelectorAll('.pdf-page') as NodeListOf<HTMLElement>;
  
    if (reportContent.length > 0) {
      const report = new jsPDF('landscape', 'px', [506, 900]);
  
      for (let i = 0; i < reportContent.length; i++) {
        const canvas = await html2canvas(reportContent[i], { scale: 2, useCORS: true });
        const imgData = canvas.toDataURL('image/jpeg');
  
        if (i > 0) {
          report.addPage();
        }
  
        report.addImage(imgData, 'JPEG', 0, 0, 900, 506);

        if (i > 1) {
          report.setFontSize(16);
          report.setTextColor(128, 128, 128);
          report.text(`${i + 1}`, report.internal.pageSize.width - 20, 20);
        }
      }
  
      report.save(`planejamento_${planning?.name}.pdf`);
      setSaving(false);
    } else {
      console.error("No report content found!");
      setSaving(false);
    }
  };

Se quiser, podemos marcar uma call para trocar mais ideias, eu ainda não estou satisfeito com essa solução. Porém tem funcionado, já forma gerados mais de 750 documentos. Meu negócio depende muito disso, pois os usuários (advogados) pagam por documento gerado.