Tengo una API que devuelve Archivo (byte [], "aplicación/pdf") | byte[] del servidor.
En la parte frontal, creo una solicitud y puedo guardar este archivo como un archivo pdf en una computadora, pero necesito almacenar este archivo (estado o de alguna otra manera) y renderizar dentro del componente de reacción como un archivo PDF , se puede poner en iframe o de alguna otra manera (para mí no importa, solo necesito renderizar dentro del componente después de obtener el archivo de la API).
const instance = axios.create({ baseURL: process.env.REACT_APP_API_ROOT, headers: { "Content-Type": "application/json", }, }); function getPdfByFileName(fileName: string): any { return instance.get(`pdfs/${fileName}`); } function getPdfAsBlobByFileName(fileName: string): any { return instance.get(`pdfs/${fileName}/array`); } useEffect(() => { getPdfByFileName("fileName") .then((response: AxiosResponse) => { // const file = new Blob([response.data], { type: "application/pdf" }); // For API which returns blob setPdf(response.data); // Need store file and correct render like PDF }) .catch((err: AxiosError) => { // process err }); } }, []); return ( <div> <iframe title="pdf" width="100%" height="600px" srcDoc={pdf}></iframe> </div> );El resultado: el componente interno renderizo los datos pero no es PDF
Estoy probado:
Gracias por cualquier ayuda.
Para mí, el problema está en el axios, la respuesta no es correcta, solo cambié a usar el método fetch y luego este caso comenzó a funcionar correctamente para mí, lo mismo con axios no funciona para mí
const request = new Request(`URL_TO_API`, { method: "GET", headers: { Authorization: `Bearer ${accessToken}`, }, mode: "cors", cache: "default", } ); fetch(request) .then((response) => response.blob()) .then((blob) => { const file = window.URL.createObjectURL(blob); const iframe = document.querySelector("iframe"); if (iframe?.src) iframe.src = file; }) .catch((err: AxiosError) => { // process error }); return ( <div> <iframe src="" width="100%" height="100%"></iframe> </div> );