1

Estoy tratando de mostrar un PDF con Typescript, me viene en base64 y lo decodifico para ver el array de bytes.

El PDF de se abre, pero en blanco, las páginas coinciden, pero esta todas sin contenido.

El contenido en base64 os lo dejo por aquí PDF en Base64

Respecto al código que uso para hacerlo es el siguiente.

En el servicio hay una llamada a la API, que es la que me devuelve el contenido.

getDescargaFactura(idFacturaVenta): Observable<any> {
    const httpHeaders = new HttpHeaders({
      'Content-Type': 'application/json',
      Authorization: this.token
    });
    const options = {
      headers: httpHeaders
    };
    const body = { IdFactura: idFacturaVenta };
    return this.http.post<any>(this.urlApi + 'Facturas/GetFacturasPDF', body, options);
  }

Y en el controlado, muestro el PDF.

descargaFactura(datos: any) {
    this._facturasService
      .getDescargaFactura(datos.IdFacturaVentaCabecera)
      .subscribe(data => {
        this.pdfFactura = this._funcionesService.decodificarToken(data);
        const newBlob = new Blob([window.atob(this.pdfFactura.PDFBase64)], {
          type: 'application/pdf'
        });

        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
          window.navigator.msSaveOrOpenBlob(newBlob);
          return;
        }

        const datos = window.URL.createObjectURL(newBlob);
        const link = document.createElement('a');
        link.href = datos;
        link.download = 'file.pdf';
        link.click();
      });
  }

He hecho varias pruebas y sólo consigo mostrar el PDF sin contenido, no se si es por algún tema de codificación o por el propio Angular.

2 respuestas 2

2

La solución ha sido la siguiente:

Cambiar la respuesta en el servicio. Añadiendo el Observable<Blob> y el header responseType: 'blob' as 'json'

getDescargaFactura(idContratoDocumento): Observable<Blob> {
    const httpHeaders = new HttpHeaders({
      'Content-Type': 'application/json',
      Authorization: this.token
    });
    const options = {
      headers: httpHeaders,
      responseType: 'blob' as 'json'
    };
    const body = { IdContratoDocumento: idContratoDocumento };
    return this.http.post<any>(
      this.urlApi + 'Facturas/GetFacturaPDF',
      body,
      options
    );
  }

Una vez modificado esto, en el componente, se ha añadido directamente la respuesta del servicio al objeto blob

descargaFactura(datos: any) {
    this._facturasService
      .getDescargaFactura(datos.IdContratoDocumento)
      .subscribe(
        data => {
          const file = new Blob([data], { type: 'application/pdf' });
          const fileURL = URL.createObjectURL(file);
          window.open(fileURL);
        }
      );
  }
-2

Ademas tienes que añadir este import.

import { ResponseContentType, Headers } from '@angular/http';

En la función que tienes en el servicio tienes que añadir el tipo de dato que quieres recoger.

    getDescargaFactura(idFacturaVenta): Observable<any> {
        const httpHeaders = new Headers({
            Authorization': this.token
        }); 
        const options = {
            headers: httpHeaders,
            responseType: ResponseContentType.Blob
        };
        const body = { IdFactura: idFacturaVenta };
        return this.http.post<any>(this.urlApi + 'Facturas/GetFacturasPDF', body, options);
  }

En la función que tienes en el controlador tienes que añadir el tipo de archivo. Ademas, he añadido unas lineas comentadas, sugiriendo que utilices la libreria saveAS.

    descargaFactura(datos: any) {
        this._facturasService
          .getDescargaFactura(datos.IdFacturaVentaCabecera)
          .subscribe(data => {
           this.pdfFactura = this._funcionesService.decodificarToken(data);

          var contentType = 'application/pdf';
          const newBlob = new Blob([data._body], {   type: contentType})

           if (window.navigator && window.navigator.msSaveOrOpenBlob) {
             window.navigator.msSaveOrOpenBlob(newBlob);
             return;
           }

           const datos = window.URL.createObjectURL(newBlob);
           const link = document.createElement('a');
           link.href = datos;
           link.download = 'file.pdf';
           link.click();
    /****
    *
    * Esto sería otra opcion de descarga. Faltaría añadir una libreria y su import 
    * import { saveAs } from 'file-saver';

        const file = new File([newBlob ], 'nombrearchivo.xlsx',{ type: contentType});
        saveAs(file);
    */
      });

  }
6
  • 1
    las respuestas sin ninguna explicacion son consideradas de baja calidad . te invito a agregar una explicacion y a realizar el recorrido de bienvenida Commented el 28 nov. 2018 a las 13:13
  • Me da error en esta variable, entiendo, que porque no está declarada. Voy a probar un poco con las indicaciones que me has dado, pero tener que poner una librería de terceros, para poder ver algo que, si no entiendo mal, es nativo de Javascript, no me parece la mejor opción. Gracias por tu respuesta
    – Diego
    Commented el 28 nov. 2018 a las 16:23
  • ¿en qué variable?
    – ivan.depi
    Commented el 28 nov. 2018 a las 16:41
  • En esta ResponseContentType.Blob
    – Diego
    Commented el 29 nov. 2018 a las 14:19
  • Añade este import: import { ResponseContentType, Headers } from '@angular/http';
    – ivan.depi
    Commented el 29 nov. 2018 a las 15:08

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.