在我的React应用程序的客户端上保存文件

时间:2018-09-03 15:51:17

标签: javascript c# reactjs

我正在尝试在我的react应用程序的客户端上保存文件。 数据是从我的API控制器(称为DownloadDocument)获得的。 我要从我的DownloadDocument方法返回FileSreamResult。 FileStreamResult读取数据并将其写入react API中的响应中。 网络选项卡得到响应,但是当我记录响应时,我得到的响应为null。 我正在使用文件保护程序来尝试保存文件。 https://www.npmjs.com/package/file-saver

有人对这个问题是什么有什么建议,或者是否有更好的解决方法?

我在控制器中的动作

我遇到的问题是我对react api的响应返回了null。

[HttpGet("{documentId}")]
    [AcceptVerbs("OPTIONS", "GET")]
    [AllowAnonymous]
    public async Task<IActionResult> DownloadDocument(int documentId)
    {
      if (documentId != 0)
      {
        var document = await service.DownloadDocumentAsync(documentId);

        var documentResponse = File(document, "application/octet-stream");             
        return documentResponse;
      }
      return BadRequest("Document id is not valid");
    }

反应应用程序。

api.indexes.downloadDocument(clones)
    .then(response=>{
    console.log(response)
    let FileSaver = require('file-saver');
    let blob = new Blob([response], {type: "application/octet-stream"});
    let filename ="testdownload"
    FileSaver.saveAs(blob, filename)

感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

我需要将此添加到标题中。 responseType:'blob'

这篇文章很好地解释了 https://medium.com/@fakiolinho/handle-blobs-requests-with-axios-the-right-way-bb905bdb1c04