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?
En este caso, resulta que el tipo de responseType de Axios debe establecerse en "blob" para que se lea el .pdf.
JobContext.js
const displayCurriculum = async () => { const { id } = params; const response = await axios.get(`/api/jobs/${id}/cv`, { method: "GET", responseType: "blob", }); const file = new Blob([response.data], { type: "application/pdf", }); const fileURL = URL.createObjectURL(file); window.open(fileURL); }; El .pdf ahora se abre en una nueva pestaña y muestra su contenido. Sin embargo, el nombre del archivo en la URL se establece en DOMString creado por URL.createObjectURL() . Si el usuario intenta descargar el .pdf, el nombre de archivo predeterminado será el DOMString generado.
URL de ejemplo:
gota:http://localhost:3000/c6430bc7-99b3-4dae-9caf-79997f801752