当前位置: 首页 > 知识库问答 >
问题:

如何使用React保存从服务器下载的文件?

贺佑运
2023-03-14
const config = require('config');
var aws4 = require('aws4');
const Promise = require('axios');

const requestHelper = {
  appendHeaders(request){
    request.headers = request.headers || {};
    if(request.headers["Content-Type"]){
      return
    }
    request.headers["Content-Type"] = "application/json";
  },
  externalApi(request, serverResult){
    if(!request.method){
      request.method='POST';
    }
    request.path = request.url
    this.appendHeaders(request)
   console.log('request',request)
    return Promise(request)
    .then((apiResponse) => {
      if (apiResponse.data.errors) {
        var error = apiResponse.data.errors;
        console.log('api error response: ', error);
        serverResult.status(400).json({ error })
      } else {
        console.log('api response: ', apiResponse.data);
        serverResult.status(200).json(apiResponse.data);
      }
    }).catch((error) => {
      console.log('api error response: ', error);
      serverResult.status(400).json({ error });
    });
   },

   getDownloadResponse(request, serverResult){
    debugger;
    request.path = request.url
    this.appendHeaders(request)
    console.log(request);
    return Promise(request)
    .then((apiResponse) => {
      if (apiResponse.data.errors) {
        var error = apiResponse.data.errors;
        console.log('api error response: ', error);
        serverResult.status(400).json({ error })
      } else {
        serverResult.status(200);
        console.log('api response status: '+200);
      }
    }).catch((error) => {
      console.log('api error response: ', error);
      serverResult.status(400).json({ error });
    });
   }
};

module.exports = requestHelper;

后端API代码:

@RequestMapping(value = GlobalConstants.DOWNLOAD_FILE, method = RequestMethod.GET)
public void downloadTemplate(HttpServletRequest hRequest, HttpServletResponse response) throws Exception {

    InputStream in = null;
    OutputStream out = null;
    try {
        if (!StringUtils.isEmpty(sampleFile)) {
            File file = new File(sampleFile);
            in = finderService.downloadFile(sampleFile);
            if (in != null) {
                MimetypesFileTypeMap mimetypesFileTypeMap = new MimetypesFileTypeMap();
                response.setContentType(mimetypesFileTypeMap.getContentType(file));
                String headerKey = "Content-Disposition";
                String headerValue = String.format("attachment; filename=\"%s\"", file.getName());
                response.setHeader(headerKey, headerValue);

                out = response.getOutputStream();
                byte[] buffer = new byte[4096];
                int length;
                while ((length = in.read(buffer)) > 0) {
                    out.write(buffer, 0, length);
                }
            }
        } else {
        response.sendError(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);
        }
        logger.error("Internal Server error"); //Add logs for server error here also

    } catch (Throwable th) {
        response.sendError(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);
        logger.error(th);
        return;
    } finally {
        if (in != null) {
            in.close();
        }
        if (out != null) {
            out.flush();
        }
    }
}

共有1个答案

丌官坚秉
2023-03-14

JS中的get请求与访问浏览器中的url不同。您需要通过指定URL直接调用客户端上的下载,例如如下所示:

download() {
  // fake server request, getting the file url as response
  setTimeout(() => {
    const response = {
      file: 'http://releases.ubuntu.com/12.04.5/ubuntu-12.04.5-alternate-amd64.iso',
    };
    // server sent the url to the file!
    // now, let's download:
    window.open(response.file);
    // you could also do:
    // window.location.href = response.file;
  }, 100);
}

这里是JSBIN上的一个工作示例。

请注意,如果您希望下载浏览器可以显示的文件(如JSON、图像、视频),它们将显示在一个新的选项卡中。如果希望直接下载这些类型的文件,则需要使用一些变通方法,例如使用blob。这里有几个例子。

 类似资料:
  • 问题内容: 我有一个后端API,它在我们调用它时基本上会下载一个模板。我在html页面上提供了href,因此,每当有人单击该href时,它就会调用后端API,并且应该下载该文件。 但是该文件未下载。 我正在使用React。如果我只是从浏览器访问后端,则文件将被下载,但是如果我从react调用,则不会。 有线索吗? 反应代码: 后端API代码: 问题答案: JS中的请求与访问浏览器中的URL不同。您

  • 问题内容: 我需要将文件从服务器下载到桌面。(UBUNTU 10.04)我没有Web访问服务器,只是ssh。 如果有帮助,我的操作系统是Mac OS X和iTerm 2作为终端。 问题答案: 在您的终端中,键入: 相应地替换用户名,主机,远程文件名和本地目录。 如果要访问EC2(或其他需要使用私钥进行身份验证的服务),请使用以下选项:

  • 问题内容: 嗨,我有一堆.mp3文件,我想与NSFileManager一起使用并存储在documents文件夹中。有没有一种方法可以在线下载.mp3文件,然后将其保存到documents文件夹?这就是我正在使用的本地文件。 问题答案: 编辑/更新: Xcode 11.5•Swift 5.2 原始答案 Xcode 8.3.2•Swift 3.1

  • 问题内容: 在我的Java应用程序中,我正在使用以下方法从服务器下载文件。 但是此下载非常慢。我该如何快速? 问题答案: 从Java 7开始,您可以下载具有以下内置功能的文件: 对于早期版本,从Java 1.4到Java 6的解决方案是 此代码将URL内容传输到没有任何第三方库的文件。如果仍然很慢,那您就知道这不是附加库的问题,很可能不是Java的问题。至少您在这里没有什么可以改善的。因此,您应该

  • 在我的服务器中,每小时生成一个文件,通常是250到300 mb,我想下载这些文件并将其放在hadoop下。如果有人有任何想法,请回复如何做。

  • 在下面的onclick事件中,我点击API获取文件路径,然后将该文件路径传递给download方法---- 下载方法为:- 上面的代码我得到错误,因为不创建元素。请帮忙解决这个问题。