Soy nuevo en el desarrollo de pila completa y me enfrento a este problema al recuperar y mostrar el contenido de un pdf. Estoy usando reactjs y express.

Declaración del problema: quiero recuperar documentos pdf del backend y enviarlos al frontend. Al mostrarlo, quiero crear una lista de desplazamiento con la vista previa de la página 1 de cada documento. Por ahora, he simplificado la declaración de mi problema y estoy enviando un pdf desde la carpeta 'pública' de mi aplicación express y recuperándolo en mi aplicación reactjs.

Código expreso: código expreso

 app.get("/pdf-templates", (req, res) => { let pdf = fs.createReadStream("./public/templates/final_look.pdf"); pdf.pipe(res); });

Código frontend: código reactjs

 function GetCertificateTemplates() { const [pdfUrl, setPdfUrl] = useState(""); const getTemplateHandler = async () => { axios("http://localhost:3030/pdf-templates", { method: "GET", responseType: "blob", }).then((res) => { const file = new Blob([res.data], { type: "application/pdf" }); const fileURL = URL.createObjectURL(file); setPdfUrl(fileURL); // console.log(res.data); // window.open( // fileURL, // "pdfwindow", // "left=100,top=100,width=300,height=300" // ); }); }; return ( <div className="Get-Certificate-Template"> <button onClick={getTemplateHandler}>Get Templates</button> {/* <iframe src={pdfUrl} />; */} <embed src={pdfUrl} type="application/pdf" />; </div> ); }

En las líneas comentadas, el comando 'ventana' funciona y el pdf se procesa bien. Pero la misma URL no funciona para iframe o incrustada en Chrome. Sin embargo, el código iframe funciona para Edge. No estoy usando 'ventana' ya que mi objetivo final es mostrar varias vistas previas de PDF en la misma ventana.

Las preguntas son las siguientes:

1. ¿Es este el enfoque recomendado para obtener y obtener una vista previa de archivos PDF?
2. Si no es así, por favor guíeme a cuál es la mejor manera.
3. Si este enfoque está bien, entonces ¿qué me estoy perdiendo?

Gracias por su tiempo por adelantado.