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

时间:2019-07-11 11:22:39

标签: javascript reactjs asp.net-core

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

1 个答案:

答案 0 :(得分:0)

由于您正在下载文件,因此您需要在代码中添加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