Home / Questions / 217708
Accepted
Diego
Asked: 2020-11-29 02:04:44 +0800 CST 2020-11-29 02:04:44 +0800 CST

打开 PDF 打字稿

  • 772

我正在尝试使用 Typescript 显示 PDF，它在 base64 中出现，我对其进行解码以查看字节数组。

PDF 打开，但空白，页面匹配，但它们都没有内容。

我将base64中的内容留在Base64中的PDF

关于我用来做的代码如下。

在服务中有一个 API 调用，它是返回内容的那个。

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);
  }

在控制器中，我显示 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();
      });
  }

我做了几次测试，我只能显示没有内容的 PDF，我不知道是因为一些编码问题还是因为 Angular 本身。

javascript

2 Answers

  1. Best Answer

    解决方案如下：

    更改服务中的响应。添加Observable<Blob>和标题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
    );
  }

    修改后，在组件中，服务响应已直接添加到 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

  2. 您还必须添加此导入。

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

    在服务中的功能中，您必须添加要收集的数据类型。

        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);
  }

    在控制器中的功能中，您必须添加文件类型。另外，我添加了一些注释行，建议您使用 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);
    */
      });

  }
    • -2