Angular 角度2或角度4的Pdf下载

我们在Angular4中设计了一个页面，其中包含下载PDF文件的功能。当用户单击下载时，我的应用程序调用web API并获取PDF文件数据。我已经为此使用了filesaver包。下面是它的代码片段

角度4代码：

    downloadPdf(url: string, body: any, basePage: BaseErrorPage, showSpinner: boolean = false, goBackToMaster: boolean = true) {
    if (showSpinner) {
        basePage.spinner.runningRefCountIncrement();
    }

    let headers = new Headers({ 
        'UserID': this.storage.UserID,
        'ADUserName': this.storage.ADUserName,
        'Content-Type': 'application/json', 
        'Accept': 'application/pdf'
    });        

    let options = new RequestOptions({ headers: headers });
    options.responseType = ResponseContentType.Blob;

    this.http.get(
        url).subscribe(
          (response) => {
            var mediaType = 'application/pdf';
            var blob = new Blob([response.blob], {type: mediaType});
            var filename = 'test.pdf';
            console.log(blob);
            console.log(response);
            saveAs(blob, filename);
          });
}

    [Route("download/{invoiceID}")]
    [HttpGet]
    public HttpResponseMessage DownloadInvoice(int invoiceID)
    {
        var result = service.GetPDFByID(invoiceID);
        if (result == null)
        {
            HttpResponseMessage r4 = new HttpResponseMessage(HttpStatusCode.NotFound);
            return r4;
        }

        HttpResponseMessage r = new HttpResponseMessage(HttpStatusCode.OK);
        r.Content = new StreamContent(new MemoryStream(result.Data));
        r.Content.Headers.ContentType = new MediaTypeHeaderValue("application/blob");
        r.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment");
        r.Content.Headers.ContentDisposition.FileName = result.FileName;

        return r;
    }

    [HttpGet]
    [ProducesResponseType(typeof(byte[]), 200)]
    public IActionResult Get()
    {
        byte[] buffer = new byte[16 * 1024];
        FileStream fs = new FileStream("C:\\Backup\\123.pdf", FileMode.Open);

        string fileName = "FileName.pdf";
        return new FileResultFromStream(fileName, fs, "application/pdf");            
    }

   public class FileResultFromStream : ActionResult
   {
    public FileResultFromStream(string fileDownloadName, Stream fileStream, string contentType)
    {
        FileDownloadName = fileDownloadName;
        FileStream = fileStream;
        ContentType = contentType;
    }

    public string ContentType { get; private set; }
    public string FileDownloadName { get; private set; }
    public Stream FileStream { get; private set; }

    public async override Task ExecuteResultAsync(ActionContext context)
    {
        var response = context.HttpContext.Response;
        response.ContentType = ContentType;
        context.HttpContext.Response.Headers.Add("Content-Disposition", new[] { "attachment; filename=" + FileDownloadName });
        await FileStream.CopyToAsync(context.HttpContext.Response.Body);
    }
  }

我的API就是这样的：

    downloadPdf(url: string, body: any, basePage: BaseErrorPage, showSpinner: boolean = false, goBackToMaster: boolean = true) {
    if (showSpinner) {
        basePage.spinner.runningRefCountIncrement();
    }

    let headers = new Headers({ 
        'UserID': this.storage.UserID,
        'ADUserName': this.storage.ADUserName,
        'Content-Type': 'application/json', 
        'Accept': 'application/pdf'
    });        

    let options = new RequestOptions({ headers: headers });
    options.responseType = ResponseContentType.Blob;

    this.http.get(
        url).subscribe(
          (response) => {
            var mediaType = 'application/pdf';
            var blob = new Blob([response.blob], {type: mediaType});
            var filename = 'test.pdf';
            console.log(blob);
            console.log(response);
            saveAs(blob, filename);
          });
}

    [Route("download/{invoiceID}")]
    [HttpGet]
    public HttpResponseMessage DownloadInvoice(int invoiceID)
    {
        var result = service.GetPDFByID(invoiceID);
        if (result == null)
        {
            HttpResponseMessage r4 = new HttpResponseMessage(HttpStatusCode.NotFound);
            return r4;
        }

        HttpResponseMessage r = new HttpResponseMessage(HttpStatusCode.OK);
        r.Content = new StreamContent(new MemoryStream(result.Data));
        r.Content.Headers.ContentType = new MediaTypeHeaderValue("application/blob");
        r.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment");
        r.Content.Headers.ContentDisposition.FileName = result.FileName;

        return r;
    }

    [HttpGet]
    [ProducesResponseType(typeof(byte[]), 200)]
    public IActionResult Get()
    {
        byte[] buffer = new byte[16 * 1024];
        FileStream fs = new FileStream("C:\\Backup\\123.pdf", FileMode.Open);

        string fileName = "FileName.pdf";
        return new FileResultFromStream(fileName, fs, "application/pdf");            
    }

   public class FileResultFromStream : ActionResult
   {
    public FileResultFromStream(string fileDownloadName, Stream fileStream, string contentType)
    {
        FileDownloadName = fileDownloadName;
        FileStream = fileStream;
        ContentType = contentType;
    }

    public string ContentType { get; private set; }
    public string FileDownloadName { get; private set; }
    public Stream FileStream { get; private set; }

    public async override Task ExecuteResultAsync(ActionContext context)
    {
        var response = context.HttpContext.Response;
        response.ContentType = ContentType;
        context.HttpContext.Response.Headers.Add("Content-Disposition", new[] { "attachment; filename=" + FileDownloadName });
        await FileStream.CopyToAsync(context.HttpContext.Response.Body);
    }
  }

代码在某种程度上似乎运行良好。当我点击下载时，API调用被点击并收到响应。此外，还下载了一个文件。但是，当我尝试打开它时，它会显示“加载PDF文档失败”。我想我在内容匹配方面犯了一些错误，尝试了各种选项，但没有成功

有人对此有任何意见吗

---

提前感谢。

经过一些研究，我终于解决了这个问题。上述代码适用于.NETFramework 4.6（或其他版本）。但是，在我的例子中，我正在开发.NETCore2.0/WebAPI2。HttpResponseMessage在此处作为json返回。为了返回流对象，我们需要编写一个自定义类。下面是新代码，它起作用了

希望这对别人有帮助

API控制器：

    downloadPdf(url: string, body: any, basePage: BaseErrorPage, showSpinner: boolean = false, goBackToMaster: boolean = true) {
    if (showSpinner) {
        basePage.spinner.runningRefCountIncrement();
    }

    let headers = new Headers({ 
        'UserID': this.storage.UserID,
        'ADUserName': this.storage.ADUserName,
        'Content-Type': 'application/json', 
        'Accept': 'application/pdf'
    });        

    let options = new RequestOptions({ headers: headers });
    options.responseType = ResponseContentType.Blob;

    this.http.get(
        url).subscribe(
          (response) => {
            var mediaType = 'application/pdf';
            var blob = new Blob([response.blob], {type: mediaType});
            var filename = 'test.pdf';
            console.log(blob);
            console.log(response);
            saveAs(blob, filename);
          });
}

    [Route("download/{invoiceID}")]
    [HttpGet]
    public HttpResponseMessage DownloadInvoice(int invoiceID)
    {
        var result = service.GetPDFByID(invoiceID);
        if (result == null)
        {
            HttpResponseMessage r4 = new HttpResponseMessage(HttpStatusCode.NotFound);
            return r4;
        }

        HttpResponseMessage r = new HttpResponseMessage(HttpStatusCode.OK);
        r.Content = new StreamContent(new MemoryStream(result.Data));
        r.Content.Headers.ContentType = new MediaTypeHeaderValue("application/blob");
        r.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment");
        r.Content.Headers.ContentDisposition.FileName = result.FileName;

        return r;
    }

    [HttpGet]
    [ProducesResponseType(typeof(byte[]), 200)]
    public IActionResult Get()
    {
        byte[] buffer = new byte[16 * 1024];
        FileStream fs = new FileStream("C:\\Backup\\123.pdf", FileMode.Open);

        string fileName = "FileName.pdf";
        return new FileResultFromStream(fileName, fs, "application/pdf");            
    }

   public class FileResultFromStream : ActionResult
   {
    public FileResultFromStream(string fileDownloadName, Stream fileStream, string contentType)
    {
        FileDownloadName = fileDownloadName;
        FileStream = fileStream;
        ContentType = contentType;
    }

    public string ContentType { get; private set; }
    public string FileDownloadName { get; private set; }
    public Stream FileStream { get; private set; }

    public async override Task ExecuteResultAsync(ActionContext context)
    {
        var response = context.HttpContext.Response;
        response.ContentType = ContentType;
        context.HttpContext.Response.Headers.Add("Content-Disposition", new[] { "attachment; filename=" + FileDownloadName });
        await FileStream.CopyToAsync(context.HttpContext.Response.Body);
    }
  }

下面的自定义类：

    downloadPdf(url: string, body: any, basePage: BaseErrorPage, showSpinner: boolean = false, goBackToMaster: boolean = true) {
    if (showSpinner) {
        basePage.spinner.runningRefCountIncrement();
    }

    let headers = new Headers({ 
        'UserID': this.storage.UserID,
        'ADUserName': this.storage.ADUserName,
        'Content-Type': 'application/json', 
        'Accept': 'application/pdf'
    });        

    let options = new RequestOptions({ headers: headers });
    options.responseType = ResponseContentType.Blob;

    this.http.get(
        url).subscribe(
          (response) => {
            var mediaType = 'application/pdf';
            var blob = new Blob([response.blob], {type: mediaType});
            var filename = 'test.pdf';
            console.log(blob);
            console.log(response);
            saveAs(blob, filename);
          });
}

    [Route("download/{invoiceID}")]
    [HttpGet]
    public HttpResponseMessage DownloadInvoice(int invoiceID)
    {
        var result = service.GetPDFByID(invoiceID);
        if (result == null)
        {
            HttpResponseMessage r4 = new HttpResponseMessage(HttpStatusCode.NotFound);
            return r4;
        }

        HttpResponseMessage r = new HttpResponseMessage(HttpStatusCode.OK);
        r.Content = new StreamContent(new MemoryStream(result.Data));
        r.Content.Headers.ContentType = new MediaTypeHeaderValue("application/blob");
        r.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment");
        r.Content.Headers.ContentDisposition.FileName = result.FileName;

        return r;
    }

    [HttpGet]
    [ProducesResponseType(typeof(byte[]), 200)]
    public IActionResult Get()
    {
        byte[] buffer = new byte[16 * 1024];
        FileStream fs = new FileStream("C:\\Backup\\123.pdf", FileMode.Open);

        string fileName = "FileName.pdf";
        return new FileResultFromStream(fileName, fs, "application/pdf");            
    }

   public class FileResultFromStream : ActionResult
   {
    public FileResultFromStream(string fileDownloadName, Stream fileStream, string contentType)
    {
        FileDownloadName = fileDownloadName;
        FileStream = fileStream;
        ContentType = contentType;
    }

    public string ContentType { get; private set; }
    public string FileDownloadName { get; private set; }
    public Stream FileStream { get; private set; }

    public async override Task ExecuteResultAsync(ActionContext context)
    {
        var response = context.HttpContext.Response;
        response.ContentType = ContentType;
        context.HttpContext.Response.Headers.Add("Content-Disposition", new[] { "attachment; filename=" + FileDownloadName });
        await FileStream.CopyToAsync(context.HttpContext.Response.Body);
    }
  }

和角度4代码：

   downloadPdf(url: string, fileName: string, body: any, basePage: BaseErrorPage, showSpinner: boolean = false, goBackToMaster: boolean = true) 
   {

    if (showSpinner) {
        basePage.spinner.runningRefCountIncrement();
    }

    let headers = new Headers({ 
        'UserID': this.storage.UserID,
        'ADUserName': this.storage.ADUserName,
        'Content-Type': 'application/json', 
        'Accept': 'application/pdf'
    });        

    let options = new RequestOptions({ headers: headers });
    options.responseType = ResponseContentType.ArrayBuffer;

    this.http.get(
        url, options).subscribe(
          (response) => {
            var mediaType = 'application/pdf';
            var blob = new Blob([response.blob()], {type: mediaType});
            saveAs(blob, fileName+'.pdf');
          });
    }