將來自asp.net核心的blob數據讀取到Angular 7

Question

美好的一天。 請幫助我解決我的問題，我無法正確讀取從后端到我的角度的數據。 我在這里所做的是下載來自后端（asp.net核心）的文件

這是我的控制器的代碼

[HttpPost("Document")]
public HttpResponseMessage Document()
        {
            try
            {
                var file = Request.Form.Files;

                var fileData = _documentToPdf.DocumentToPdf(file[0].OpenReadStream());
                HttpResponseMessage response = null;


                response = new HttpResponseMessage
                {
                    StatusCode = HttpStatusCode.OK,
                    Content = new ByteArrayContent(fileData.ToArray())
                };
                response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment");
                response.Content.Headers.ContentDisposition.FileName = "pdf.pdf";
                response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
                response.Content.Headers.ContentLength = fileData.Length;

                Console.WriteLine("file data size: " + fileData.Length);


                return response;
            }
            catch (Exception ex)
            {
                Console.WriteLine(ex.Message);
                Console.WriteLine(ex.StackTrace);
                throw;
            }
        }

這是我的角度代碼

uploadAndProgress(files: File[]){
    console.log(files)
    var formData = new FormData();
    Array.from(files).forEach(f => formData.append('file',f))

    this.http.post('http://localhost:5000/api/DocumentToPdf/Document', formData, {reportProgress: true, responseType: 'blob',  observe: 'events'})
      .subscribe(event => {
        if (event.type === HttpEventType.UploadProgress) {
          this.percentDone = Math.round(100 * event.loaded / event.total);
        } else if (event instanceof HttpResponse) {
          this.uploadSuccess = true;
          console.log('Success');
          console.log('event: ' + event);
          this.downloadFile(event, 'download.pdf');
        }
    });
  }

  downloadFile(data: any, filename: string) {
    const blob = new Blob([data], { type: 'application/octet-stream' });
    console.log(blob);
    saveAs(blob, filename);
  }

代碼Console.WriteLine("file data size: " + fileData.Length); 返回65651但是以angular表示的代碼是console.log（blob）; 它返回

size: 15
type: "application/octet-stream"

那么為什么它們不相同呢？ 因此，我如何正確讀取來自asp.net的blob到我的角度，以便我可以下載它。 非常感謝

Answer 1

你可以這樣

為您服務

url: string = "some url";

getBlob(): Observable<Blob> {
    const headers = new HttpHeaders({
      'Content-Type': 'application/json',
      'Accept': 'application/json'      
    });
    return this.httpClient.get<Blob>(this.url, {headers: headers, responseType: 'blob' as 'json' });
  }

然后在您的組件中

imageBlobUrl: string = null;

getImage() : void {
    this.blobService.getBlob()
      .subscribe((val) => {
          this.createImageFromBlob(val);
        });
  }
  createImageFromBlob(image: Blob) {
    let reader = new FileReader();
    reader.addEventListener("load", () => {
      this.imageBlobUrl = reader.result;
    }, false);
    if (image) {
      reader.readAsDataURL(image);
    }
  }

然后在您看來

  <img [src]="imageBlobUrl">