Angular 5 Как создать PDF URL?

Question

Я получаю строку base64 PDF-файла с сервера REST.Я хочу, чтобы PDF отображался в окне.Но у меня проблемы с созданием URL.Получившийся invoicePdfURL выглядит следующим образом:

blob:https://localhost:4200/dc391fef-25fb-4dcf-921b-779384182920

Я управляю сервером REST и могу заставить его вернуть что-нибудь подходящее.В этом примере он возвращает строку base64, у меня также было возвращение байта [], но у меня возникла та же проблема.

Как правильно это кодировать?

Здесь component.ts:

  public invoicePdfURL: SafeResourceUrl;
  ...

  public getInvoicePDF() {              
    this.invoiceService.getInvoicePDF(this.rowID)
      .subscribe( base64Data => {              
        const byteArray = new Uint8Array(atob(base64Data).split('').map(char => char.charCodeAt(0)));  

        const binaryData = [];
        binaryData.push(byteArray);

        const blob = new Blob(binaryData, {type: "application/pdf"});

        this.invoicePdfURL = this.domSanitizer.sanitize(SecurityContext.HTML, 
                             this.domSanitizer.bypassSecurityTrustHtml(URL.createObjectURL(blob)));
        console.log("this.invoicePdfURL: " +this.invoicePdfURL);
    });
  }

Вот component.html:

  <button class="btn btn-danger pull-left" onclick="window.open('{{invoicePdfURL}', '_blank')">
    <i class="fa fa-download"></i> Download PDF
  </button>

Answer 1

URL-адрес BLOB-объекта правильный, проблема заключалась в том, как я пытался передать его в component.html.Я исправил это, введя HTML, как показано ниже.Я также произвел рефакторинг component.ts.

component.ts:

  public getInvoicePDF() {  

    this.invoiceService.getInvoicePDF(this.rowID)
      .subscribe( base64Data => {

        const byteArray = new Uint8Array(atob(base64Data).split('').map(char => char.charCodeAt(0)));
        const blob = new Blob([byteArray], {type: 'application/pdf'});

        this.invoicePdfURL = URL.createObjectURL(blob);        

        this.downloadPdfHTML =
          `
            <button class="btn btn-danger pull-left" onclick="window.open('` +this.invoicePdfURL +`', '_blank')">
              <i class="fa fa-download"></i> Download PDF
            </button>
          `;
    });
  }

component.html:

  <div [innerHTML]="downloadPdfHTML | safeurl: 'html'"></div>