Estoy tratando de abrir un .pdf en otra pestaña que está almacenada en el sistema de archivos del servidor (estoy usando Express, React y MySQL). Cuando el usuario hace clic en el botón "Ver", se ejecuta la función displayCV y se abre una nueva pestaña, pero el contenido del .pdf está en blanco, aunque la nueva pestaña muestra el número correcto de páginas que contiene el .pdf.

El flujo es así:

ElementoTrabajo.jsx

 const displayCV = async (e) => { e.preventDefault(); await displayCurriculum(); };

JobContext.js

 const displayCurriculum = async () => { const { id } = params; const response = await axios.get(`/api/jobs/${id}/cv`); // console.log(response); const file = new Blob([response.data], { type: "application/pdf", }); const fileURL = URL.createObjectURL(file); const pdfWindow = window.open(); pdfWindow.location.href = fileURL; };

El back-end se ve así:

jobRoutes.js

 const express = require("express"); const router = express.Router(); const { displayCurriculum } = require("../controllers/jobController"); router.route("/:id/cv").get(displayCurriculum);

jobController.js

 const displayCurriculum = asyncHandler(async (req, res) => { try { const { id } = req.params, q = `SELECT curriculum FROM jobs WHERE idjobs = ?`, doc = await pool.query(q, [id]); const fileName = doc[0].curriculum; // const data = fs.readFileSync(filesPath + "\\" + fileName); res.setHeader("Content-Type", "application/pdf"); res.sendFile(fileName, { root: filesPath }, (err) => { if (err) console.log(err); else console.log("Sent: ", fileName); }); } catch (error) { console.log(error); } });

Si uso Postman y presiono el punto final de la API ( /api/jobs/${id}/cv ), el .pdf se muestra correctamente en Postman. Al llegar al punto final desde la interfaz, obtengo la siguiente imagen con contenido .pdf en blanco

¿Cómo puedo mostrar el contenido .pdf en la nueva pestaña?