如何使用 ServiceStack 和 Angular 下载动态生成的 XML 文件？

Question

The following code works in theory, but it lacks error handling. The problem I have is that it starts downloading the XML file when a new window opens with the url created by the service stack. But now when an error occurs server side, you are on this new page with only the stack trace.

What is the right way to download a dynamic binary (not stored on disk) with service stack and Angular?

Angular with ServiceStack:

downloadExportXML(){
  const request = new GetRatingsExportRequest(this.request);
  const url = this.jsonServiceClient.createUrlFromDto("GET", request)
  window.open(url);
}

WebAPI (C#) to collect the XML File.

  public HttpResult Get(GetRatingsExportRequest request)
  {
      MemoryStream ms = new MemoryStream(Encoding.UTF8.GetBytes(xmlContent));
      var result = new HttpResult(ms.ToArray());
      var disposition = $"attachment;filename=myfilename;";
      result.Headers.Add(HttpHeaders.ContentDisposition, disposition);
      return result;
  }

Answer 1

If you return the content with a Content-Disposition: attachment HTTP Header the browser will treat it as a separate File Download.

If you don't want that return it as a normal XML Response. But the way you're returning it is fairly inefficient, ie calling ToArray() defeats the purpose of using a Stream since you've forced loaded the entire contents of the Stream in memory, instead you should just return the stream so it gets asynchronously written to the HTTP Response as a Stream, eg:

return new HttpResult(ms, MimeTypes.Xml);

But if you've already got the XML as a string you don't need the overhead of the MemoryStream wrapper either and can just return the XML string as-is, eg:

return new HttpResult(xmlContent, MimeTypes.Xml);

Answer 2

I couldnt make it work. So i created this workaround: Generating the URL to download the XML with the ServiceStack method jsonServiceClient.createUrlFromDto() and than downloading the file via Angular HTTPClient.

downloadExportXML(){
  const request = new GetRatingsExportRequest(this.request);
  const url = this.jsonServiceClient.createUrlFromDto("GET", request)

  this.httpClient.get(url, {observe: 'response', responseType: 'arraybuffer'})
    .subscribe((response) => {
      var contentDisposition = response.headers.get('content-disposition');
      this.downloadFile(response.body)
    },
    error => this.handleError()
  );
}

private downloadFile(blobData: ArrayBuffer)
{
    let file = new Blob([blobData], { type: 'application/binary' });
    let fileURL = URL.createObjectURL(file);
    let fileLink = document.createElement('a');
    fileLink.href = fileURL;
    fileLink.download = "MYFILENAME.pdf";
    fileLink.click();
}