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

Question

我从 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");
        }
}

标签： javascriptc#reactjsasp.net-coreasp.net-core-mvc

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

你可以在这里阅读完整的代码