Question

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

Angular4代码：

    [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;
    }

这就是我的API的样子：

{{1}}

代码似乎在某种程度上正常工作。当我点击下载时，会触发API调用并收到响应。此外，还下载了一个文件。但是，当我尝试打开它时，它说＆＃34;无法加载PDF文档。＆＃34;我想我在内容匹配方面做了一些错误并尝试了各种选项，但无法成功。

请有人对此有任何意见！

提前致谢。

Answer 1

经过一番研究，我能够解决这个问题。上面的代码适用于.Net Framework 4.6（或其他版本）。但是，就我而言，我正在研究.Net core 2.0 / web API2。 HttpResponseMessage在这里作为json返回。我们需要编写一个自定义类来返回流对象。下面是新的代码，有效。

希望这有助于某人。

API控制器：

    [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);
    }
  }

和Angular 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');
          });
    }

在Angular 2或Angular 4中下载Pdf

1 个答案: