☰

Reactを使用してサーバーからダウンロードしたファイルを保存するにはどうすればよいですか? 質問する

tag-icon • tag-icon reactjs
Reactを使用してサーバーからダウンロードしたファイルを保存するにはどうすればよいですか? 質問する

基本的に、呼び出すたびにテンプレートをダウンロードするバックエンド API が 1 つあります。HTML ページに href を指定しているので、誰かがその href をクリックするたびに、バックエンド API が呼び出され、そのファイルがダウンロードされます。

しかし、ファイルはダウンロードされません。

私は React を使用しています。ブラウザからバックエンドにアクセスすると、ファイルはダウンロードされますが、React から呼び出すとダウンロードされません。

何か手がかりは？

反応コード:

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

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。いくつかの例を挙げるとここに。

おすすめ記事