从 ReactJs 中的 api 下载文件

Question

I have ASP.NET Core MVC back-end api. One controller returns File from server. Is there a way to make request to api route by [href] attribute of <a> tag? Looks like it tries to call React route but not make a request to server.

Also I made AJAX call to that controller and got back file as a string (screenshot is attached). Why is it a string, shouldn.t it be a byte array? How to build back file from that string? (it's a.pdf file). I have an empty PDF if use JavaScript new File([], 'name', {options}).

ASP.NET Core controller returns PDF this way:

return PhysicalFile(Path.GetFullPath(relativePath), "application/pdf", reportName);

In React I receive it as a string this way:

let stringPDFBinary = await ReportService.getReport(id, reportFileName)

I just need to download file from api by any way.

Answer 1

So, the answer is here: PDF is blank when downloading using javascript

The same problem. Let it be one more topic, easier to find for others. The AJAX response is encoded string. In request config set 'responseType = 'arraybuffer'' somehow and receiving pdf will not be blank. Solved.

Answer 2

I Just copied and pasted from the code source. The problem seems to be the same that i had:

Asp net controller:

    [HttpGet]
    [Route("File")]
    [AllowAnonymous]
    public IActionResult GetFile(string key)
    {
        var file = (FileCacheValue)_fileCache.Cache[key.Replace(" ", "+")];

        if (file == null)
            return NotFound();

        Response.Headers["content-disposition"] = $"inline;filename={file.Name}.pdf";

        return File(file.Data, "application/pdf");
    }

In this case comes from a cache system. The data is a byte array.

Front-end React:

const onClick = () => 
{
   window.open(pdfByteArray, '_blank', 'fullscreen=yes');
}

Exactly what i have. I just put the data on a new window and open the pdf.

The Ajax part is straight forward, get the value from the response and set it on a variable