0

Hola estoy aprendiendo a Programar y tengo un problema, cuando abro un archivo PDF en mi aplicación web para mostrarlo, este me muestra lo siguiente:

introducir la descripción de la imagen aquí

Controller Backend (Java)

@GetMapping("/epcanatomia/{rut}/{codigopaciente}")
    public ResponseEntity<List<AnatomiaDto>> getAnatomia(@PathVariable("rut") String rut, @PathVariable("codigopaciente") String codigopaciente) 
    {
        try
        {
            AnatomiaDto a = anatomiapatologicarepository.findAnatomia(rut, codigopaciente).get(0);
            
            File file = new File("C:/APA/" + a.getNombreArchivo());
            
            byte[] bytes = Files.readAllBytes(Paths.get(file.getAbsolutePath()));
            
            AnatomiaDto anatomia = new AnatomiaDto();
            
            anatomia.setNombreArchivo(a.getNombreArchivo());
            anatomia.setFile(bytes);
            anatomia.setFecha(a.getFecha());
            
            List<AnatomiaDto> list = new ArrayList<AnatomiaDto>();
            
            list.add(anatomia);
             
            return new ResponseEntity<>(list, HttpStatus.OK);
            
        }
        catch(Exception e)
        
        {
            System.out.println(e.getMessage());
            return new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR);

        }
    }
  1. DTO Backend
public class AnatomiaDto {

    private String nombreArchivo;
    private byte[] file;
    private String fecha;
    private String rut;
    private String codigoPaciente;

    public String getNombreArchivo() {
        return nombreArchivo;
    }

    public void setNombreArchivo(String nombreArchivo) {
        this.nombreArchivo = nombreArchivo;
    }

    public byte[] getFile() {
        return file;
    }

    public void setFile(byte[] file) {
        this.file = file;
    }

    public String getFecha() {
        return fecha;
    }

    public void setFecha(String fecha) {
        this.fecha = fecha;
    }

    public String getRut() {
        return rut;
    }

    public void setRut(String rut) {
        this.rut = rut;
    }

    public String getCodigoPaciente() {
        return codigoPaciente;
    }

    public void setCodigoPaciente(String codigoPaciente) {
        this.codigoPaciente = codigoPaciente;
    }
  1. Component Frontend (Angular)
  Prueba(obj: any){

    const blob = new Blob([JSON.stringify(obj.file)], {type: 'application/json'});
    const fileURL = URL.createObjectURL(blob);
    window.open(fileURL);

  }

He probado cambiando lo siguiente

{type: 'application/json'});

Por

{type: 'application/pdf'});

Pero me manda un error y me dice que mi archivo no se puede cargar y al recargarlo no me lo muestra

introducir la descripción de la imagen aquí

Entonces no se como mostrar mi archivo PDF, por lo que investigue me decía que falta decodificarlo antes en la parte del Backend pero yo no se como hacerlo y las soluciones que vi no me sirvieron o no supe implementarlas bien estaré atento a cualquier ayuda, gracias.

3
  • Tienes que retornar el byte[] directamente, no el DTO. Commented el 28 sept. 2022 a las 19:37
  • Y como podría retornar solo el byte[ ] con los valores asociados?
    – Carlos
    Commented el 28 sept. 2022 a las 19:41
  • Si usas Spring deberías agregar esa etiqueta.
    – Sal
    Commented el 29 sept. 2022 a las 1:16

1 respuesta 1

0

Creo que vas por buen camino. Si la respuesta que te llega en formato JSON contiene un array de bytes, en teoría solo debes asegurarte de crear el blob correctamente. Toma este extracto de código como ejemplo (lo puedes copiar y pegar en la consola del navegador para verificar que si funciona):

// este es un simple pdf codificado en base64 a modo de ejemplo:
var b64 = "JVBERi0xLjcNCiWhs8XXDQoxIDAgb2JqDQo8PC9QYWdlcyAyIDAgUiAvVHlwZS9DYXRhbG9nPj4NCmVuZG9iag0KMiAwIG9iag0KPDwvQ291bnQgMS9LaWRzWyA0IDAgUiBdL1R5cGUvUGFnZXM+Pg0KZW5kb2JqDQozIDAgb2JqDQo8PC9DcmVhdGlvbkRhdGUoRDoyMDIyMDkyODE2NDAzMCkvQ3JlYXRvcihQREZpdW0pL1Byb2R1Y2VyKFBERml1bSk+Pg0KZW5kb2JqDQo0IDAgb2JqDQo8PC9Db250ZW50cyA1IDAgUiAvTWVkaWFCb3hbIDAgMCA2MTIgNzkyXS9QYXJlbnQgMiAwIFIgL1Jlc291cmNlczw8L0ZvbnQ8PC9GMSA2IDAgUiA+Pi9Qcm9jU2V0IDcgMCBSID4+L1R5cGUvUGFnZT4+DQplbmRvYmoNCjUgMCBvYmoNCjw8L0ZpbHRlci9GbGF0ZURlY29kZS9MZW5ndGggMzExPj5zdHJlYW0NCnicvZPNasMwEITvBr/DHFtot7LiH/mYtMmhECjU9C5i2VGw5WDJpfTpayckhUCDSqGSDjsHfcPOshzPYbAowoBhun0dBg+rCIzxDEUVBklGsyxhyDgnLhhDUYbBDeZ41e2+UXh5WmGlx+IWxS4MlsWRdmRE7MBIc+LJ+DUVglImToxiqy3GJ2Fb2TQoVdsZ63rpdGdA+7JCNZHvvdhpTBmLT+zdYB2qrsdgFbSB2yq86d4NssFabbbS6I2FG1zXa9lYwrrrFZz6cIS5KdFO0sc24ZQl/GR7AfCRPiZckIjPuf0K/5P0sY1SEnl6tbfFmJ+p7/A5HR9zH18WUx6fR/nnVr1zTnJOec79cvbhjQUT/z63ZNzZaHZ9bhdy+a7MQRMeO+O0GVSJcQn3slbgIKJv3y8shB6ADQplbmRzdHJlYW0NCmVuZG9iag0KNiAwIG9iag0KPDwvQmFzZUZvbnQvSGVsdmV0aWNhL0VuY29kaW5nL1dpbkFuc2lFbmNvZGluZy9OYW1lL0YxL1N1YnR5cGUvVHlwZTEvVHlwZS9Gb250Pj4NCmVuZG9iag0KNyAwIG9iag0KWy9QREYvVGV4dF0NCmVuZG9iag0KeHJlZg0KMCA4DQowMDAwMDAwMDAwIDY1NTM1IGYNCjAwMDAwMDAwMTcgMDAwMDAgbg0KMDAwMDAwMDA2NiAwMDAwMCBuDQowMDAwMDAwMTIyIDAwMDAwIG4NCjAwMDAwMDAyMDkgMDAwMDAgbg0KMDAwMDAwMDM0MyAwMDAwMCBuDQowMDAwMDAwNzI2IDAwMDAwIG4NCjAwMDAwMDA4MjUgMDAwMDAgbg0KdHJhaWxlcg0KPDwNCi9Sb290IDEgMCBSDQovSW5mbyAzIDAgUg0KL1NpemUgOC9JRFs8NEY2MkQwQTkwNDlFOUM1N0NGQzRCODEzRTVCNjhDNUI+PDRGNjJEMEE5MDQ5RTlDNTdDRkM0QjgxM0U1QjY4QzVCPl0+Pg0Kc3RhcnR4cmVmDQo4NTUNCiUlRU9GDQo=";

// aquí convierto el base64 en caracteres
var characters = atob(b64);

// aquí convierto todo a un array de bytes usando el codigo de cada caracter:
var bytes = new Array(characters.length);

for (var i = 0; i < characters.length; i++) {
    bytes[i] = characters.charCodeAt(i);
}

// en este punto ya tengo un array de bytes,
// (supongo que es algo similar a lo que te llega de respuesta)
// el siguiente paso sería convertir este array en un typed array
// para construir el blob correctamente:
var chunk = new Uint8Array(bytes);

// se construye el blob con el mime type respectivo
var blob = new Blob([chunk], {
  type: 'application/pdf'
});

// se crea un object url con el blob para usarlo:
var url = URL.createObjectURL(blob);

// y de esta manera simplemente lo abro en una nueva ventana:
window.open(url, '_blank');

1
  • 1
    Muchas gracias, me sirvió y funciono para poder abrir el archivo pdf
    – Carlos
    Commented el 29 sept. 2022 a las 12:27

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.