转换 b64 格式时无法加载 PDF 文档答案

【问题标题】：Failed to load PDF document while converting the b64 formate转换 b64 格式时无法加载 PDF 文档
【发布时间】：2021-07-20 09:10:05
【问题描述】：

我正在使用 Angular 进行 PDF 上传和下载。

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>

service.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 中打开它时，我收到以下错误：

【问题讨论】：

标签： angular base64 file-saver

【解决方案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();
    }); 
}

这段代码非常适合我，可能对你有用。

【讨论】：