Estoy tratando de renderizar un PDF en la memoria usando el método pdf
@react-pdf/renderer
y luego introduzco los bytes resultantes en el objeto PDFDocument
pdf-lib
. La razón por la que hago esto es porque react-pdf
no permite incrustar (fusionar) otros PDF y la biblioteca de fusión que estamos usando ( pdf-merger-js
) no admite devolver los números de página del PDF fusionado , lo que significa que no podemos representar correctamente nuestra tabla de contenido.
Lo que sucede es que después de tomar el resultado de @react-pdf/renderer.pdf(...)
, codificarlo como base64
y pasarlo a pdf-lib.PDFDocument.load(...)
, la vista previa del resultado PDF en el navegador es una cadena de bytes como la siguiente. No hemos tenido problemas para crear esta vista previa en PDF antes de nuestra introducción de pdf-lib
:
El código que hace esto es el siguiente ( toc
== Table of Contents, ambos argumentos son colecciones de elementos react-pdf
):
const mergePdfsToObjectUrl = async (toc: ReactElement, pdfPages: any[]) => { if (toc && pdfPages?.length > 0) { const pdfString = await pdf(toc); const string = await pdfString.toString(); const base64string = encode(string); const tocPdf = await PDFDocument.load(base64string); // Create a new document const doc = await PDFDocument.create(); // Add individual content pages const tocPdfPages = await doc.copyPages(tocPdf, tocPdf.getPageIndices()); for (const page of tocPdfPages) { doc.addPage(page); } // Write the PDF to a file const pdfBytes = await doc.save(); const url = URL.createObjectURL(new Blob([pdfBytes])); return url; }
Probé todo, desde diferentes códecs hasta diferentes canalizaciones para transformar los datos react-pdf
en una cadena de bytes utilizable, pero nada parece funcionar.