如何使用 ASP.NET Core 2.1 和 React JS 创建下载功能？答案

【问题标题】：How to create download feature using ASP.NET Core 2.1 and React JS?如何使用 ASP.NET Core 2.1 和 React JS 创建下载功能？
【发布时间】：2019-11-26 10:00:22
【问题描述】：

我正在使用 ASP.NET Core 和 React JS。我是这两个平台的新手。我使用 Axios 来请求数据并从服务器获取响应。但我没有从服务器请求图像或任何类型的文件。这次我正在开发下载功能，用户将点击按钮并可以下载所需的 .png、.jpg、.pdf 格式的文件。我不明白服务器如何发送数据？我读过，我需要发送从 blob 格式转换而来的 base64 数据。但不了解如何从客户端请求数据以及服务器将如何提供所需的文件。在 DB 中，我只存储了文件的地址，例如/图像/img1.jpg。该文件实际上位于 wwwroot/images 文件夹中。我使用downloadjs 进行下载，它工作正常，但下载后，该图像不可读，因为它没有任何内容。

请任何人帮助我实现此功能。

【问题讨论】：

标签： javascript c# node.js reactjs asp.net-core

【解决方案1】：

首先你需要 API 来下载类似这样的数据

  public async Task<IActionResult> Download(string filename)  
  {  
      if (filename == null)  
          return Content("filename not present");  

      var path = Path.Combine(  
                     Directory.GetCurrentDirectory(),  
                     "wwwroot", filename);  

      var memory = new MemoryStream();  
      using (var stream = new FileStream(path, FileMode.Open))  
      {  
          await stream.CopyToAsync(memory);  
      }  
      memory.Position = 0;  
      return File(memory, GetContentType(path), Path.GetFileName(path));  
  } 

private string GetContentType(string path)  
    {  
        var types = GetMimeTypes();  
        var ext = Path.GetExtension(path).ToLowerInvariant();  
        return types[ext];  
    }  

    private Dictionary<string, string> GetMimeTypes()  
    {  
        return new Dictionary<string, string>  
        {  
            {".txt", "text/plain"},  
            {".pdf", "application/pdf"},  
            {".doc", "application/vnd.ms-word"},  
            {".docx", "application/vnd.ms-word"},  
            {".xls", "application/vnd.ms-excel"},  
            {".xlsx", "application/vnd.openxmlformats  
officedocument.spreadsheetml.sheet"},  
                {".png", "image/png"},  
                {".jpg", "image/jpeg"},  
                {".jpeg", "image/jpeg"},  
                {".gif", "image/gif"},  
                {".csv", "text/csv"}  
            };  
        }

然后像这样下载文件

axios({
  url: 'your url',
  method: 'POST',       // Worked using POST or PUT. Prefer POST
  responseType: 'blob', // important
}).then((response) => {
  const url = window.URL.createObjectURL(new Blob([response.data]));
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', 'file.pdf');
  document.body.appendChild(link);
  link.click();
});

参考link

【讨论】：

感谢您的指导。对此link 进行更改后的代码，即GetContentType(path) 的定义我在link 中找到。但我面临一个问题。此代码在 localhost 上完美运行。但是当我在服务器上上传时，它会抛出状态代码 400 的错误。我尝试了所有方法，但无法解决该问题。我该如何解决这个错误？
您使用的是哪个主机服务？
我的网站在 IIS 服务器上运行，在 Windows Server 2012 R2 上运行。
你可以创建另一个问题让我看看
Here我创建了新问题。