如何使用 axios 下载文件

小编典典

如何使用 axios 下载文件

all

我将 axios 用于基本的 http 请求，如 GET 和 POST，并且效果很好。现在我也需要能够下载 Excel
文件。axios可以做到这一点吗？如果是这样，有人有一些示例代码吗？如果没有，我还能在 React 应用程序中使用什么来做同样的事情？

阅读 123

2022-06-24

共1个答案

小编典典

当响应带有可下载文件时，响应标头将类似于

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

您可以做的是创建一个单独的组件，其中将包含一个隐藏的 iframe。

  import * as React from 'react';

  var MyIframe = React.createClass({

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

现在，您可以将可下载文件的 url 作为 prop 传递给该组件，因此当该组件接收到 prop 时，它将重新渲染并下载文件。

编辑： 您也可以使用js-file-download模块。链接到 Github 存储库

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

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

希望这可以帮助：）

2022-06-24