1. ホーム
  2. axios

[解決済み] アクシオスでファイルをダウンロードする方法

2022-03-01 18:56:04

質問

私はGETやPOSTなどの基本的なhttpリクエストにaxiosを使用しており、それはうまく動作しています。今、私はあまりにもExcelファイルをダウンロードできるようにする必要があります。これはaxiosで可能ですか?可能であれば、どなたかサンプルコードをお持ちではないでしょうか。そうでない場合、Reactアプリケーションで同じことを行うには、他に何を使用できますか?

どのように解決するのですか?

レスポンスにダウンロード可能なファイルが含まれる場合、レスポンスヘッダーは次のようになります。

Content-Disposition: "attachment;filename=report.xls"
Content-Type: "application/octet-stream" // or Content-type: "application/vnd.ms-excel"

できることは、別のコンポーネントを作成し、その中にhidden iframeを入れることです。

  import * as React from 'react';

  var MyIframe = React.createClass({

     render: function() {
         return (
           <div style={{display: 'none'}}>
               <iframe src={this.props.iframeSrc} />
           </div>
         );
     }
  });

このコンポーネントがpropを受け取ると、再レンダリングしてファイルがダウンロードされるようになります。

編集する を使用することもできます。 jsファイルダウンロード モジュールを使用します。 Githubレポへのリンク

const FileDownload = require('js-file-download');

Axios({
  url: 'http://localhost/downloadFile',
  method: 'GET',
  responseType: 'blob', // Important
}).then((response) => {
    FileDownload(response.data, 'report.csv');
});

お役に立てれば幸いです :)