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

Question

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

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

Answer 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