如何使用 react js 和 asp.net core v3.0 下载文件答案

【问题标题】：How to download file using react js and asp.net core v3.0如何使用 react js 和 asp.net core v3.0 下载文件
【发布时间】：2019-11-21 02:32:09
【问题描述】：

我从 web 服务获取 base64 pdf 字符串，然后将 base64 转换为 Byte[]，然后在控制器中返回文件，但文件没有下载

我使用 react 作为前端调用控制器，使用 fetch api

fetch('/api/PDFDownload/PDFDownloadStat', {
        method: 'POST',
        headers: {
            'content-type': 'application/json',
            'X-CSRF-TOKEN': getCookies("CSRF-TOKEN")
        },
        body: JSON.stringify(data)
    }).then(res => res.json())
       
        }).catch(error =>
        {
            console.log(error)
        });

public class PDFDownloadController : Controller{    

[HttpPost("[action]")]
        public async Task<IActionResult> PDFDownloadStatController(PDFEntity pdfObj)
        {

            var response = string.Empty;
            Byte[] Base64=null;
            try
            {

                if (ModelState.IsValid)
                {                  
                    Base64 = genPDF.GetPDFByte();  // getting Byte for pdf

                }              
            }
            catch (Exception ex)
            {

            }
            return File(Base64, "application/pdf", "myFile.pdf");
        }
}

【问题讨论】：

现在您将请求的响应解析为 json，这（显然）不适用于文件。查看fetch 的response.blob()：developer.mozilla.org/en-US/docs/Web/API/Body/blob - 可能与downloadjs 等库相结合，将该blob 转换为（下载的）文件：npmjs.com/package/downloadjs
或者参考stackoverflow.com/a/32545850/3061857这里发布的答案，看看你如何使用response.blob()和downloadjs。

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

【解决方案1】：

由于您是下载文件，因此您需要在代码中添加 blob 响应

fetch('/api/PDFDownload/PDFDownloadStat', {
        method: 'POST',
        headers: {
            'content-type': 'application/json',
            'X-CSRF-TOKEN': getCookies("CSRF-TOKEN")
        },
        body: JSON.stringify(data)
    }).then(res => return response.blob())
        }).catch(error =>
        {
            console.log(error)
        });

在 mozilla 文档示例中：

var myHeaders = new Headers();

var myInit = { method: 'GET',
               headers: myHeaders,
               mode: 'cors',
               cache: 'default' };

var myRequest = new Request('flowers.jpg', myInit);

    fetch(myRequest).then(function(response) {
      return response.blob();
    }).then(function(myBlob) {
      var objectURL = URL.createObjectURL(myBlob);
      myImage.src = objectURL;
    });

您可以阅读完整代码here

【讨论】：