轉換 b64 格式時無法加載 PDF 文檔

Question

我正在使用 PDF 上傳和下載來處理 Angular。

html：

<h1>Upload and Download File</h1>
        <input type="file" class="upload_file" id="customFile" name="datasource_upload" id="datasource_upload"
            accept=".xlsx,.xls,.csv" ngf-max-size="20MB" fd-input (change)="selectFile($event)" />
        <button class="btn btn-primary" [disabled]="!selectedFiles" (click)="upload()">
            Submit Document
        </button>

服務.ts：

 docUploadRequestURL: Function = (data: any): Observable<any> => {

    return this._http.post('/api/upload',data, this.options);
  };

  fireDownloadFilenetPdfServiceCall: Function = (requestParms: any) => {
    const isWindowOpen = requestParms[0].operation === 'PDF_FILENET_SAVE';
    if (!isWindowOpen) {
      this.win = window.open('', '_blank');
      this.win.document.write(
         '<div style="margin: 200px auto; width: 300px;"><span style="float: left; padding-right: 15px;"><img src="https://online.citi.com/JFP/images/widgets/jfpw-spinner-medium.gif"></span><span style="float: left; line-height: 32px; font-size: 18px;">Loading... Please wait</span></div>'
       );
       
    }
    return this._http
      .post('/api/pdfDownload', requestParms, this.options)
      .subscribe((response: any) => {
        if (!isWindowOpen && response) {
          var contentType = 'application/pdf';
          requestParms.forEach((element: any) => {
            let blob = this.b64toBlob(
              response[element.AppId].pdfContent,
              contentType
            );
            saveAs(blob, 'loannote.PDF');
          });
          this.win.close();
        }
        else{
          console.log("PDF saved");
        }
      });
  };
  b64toBlob(b64Data: string, contentType: string, sliceSize?: number) {
    contentType = contentType || '';
    sliceSize = sliceSize || 512;
    var byteCharacters = atob(b64Data);
    var byteArrays = [];
    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
      var slice = byteCharacters.slice(offset, offset + sliceSize);
      var byteNumbers = new Array(slice.length);
      for (var i = 0; i < slice.length; i++) {
        byteNumbers[i] = slice.charCodeAt(i);
      }
      var byteArray = new Uint8Array(byteNumbers);
      byteArrays.push(byteArray);
    }
    var blob = new Blob(byteArrays, { type: contentType });
    return blob;
  }

當我下載 PDF 並在 Chrome 中打開它時，出現以下錯誤：

Answer 1

以下是在我的情況下返回響應的 WEB API 代碼 FileContents 表示字節：

return Ok(File(result.MainStream, "application/pdf").FileContents);

以下是用於處理 API 響應以在新窗口中打開文檔的 Typescript 代碼：

GetPrint(Code: number) {
    this.CommonService.LoadingProcessStart();
    this.http.get(this.API + "GetPrint", {
    responseType: 'json'
    }).subscribe(data => {
        this.CommonService.LoadingProcessEnd();
        var urlData = "data:application/pdf;base64," + data;
        var iframe = "<iframe width='100%' height='100%' src='" + urlData + "'></iframe>"
        var x = window.open();
        x.document.open();
        x.document.write(iframe);
        x.document.close();
    }); 
}

這段代碼非常適合我&可能對你有用。