如何使用axios下载文件

Question

我正在使用axios处理基本的http请求，如GET和POST，并且运行良好。现在我需要能够下载Excel文件了。axios是否可以实现这一点？如果有，有人有一些示例代码吗？如果没有，我还可以在React应用程序中使用什么来执行相同的操作？

Answer 1

当您想要使用Axios和一些安全手段下载文件时，这实际上更加复杂。为了防止其他人花太多时间来弄清楚这一点，让我给你讲一讲。

你需要做3件事：

1. 配置您的服务器以允许浏览器查看所需的HTTP标头
2. 实现服务器端服务，并使其为下载的文件通告正确的文件类型。
3. 在浏览器中实现Axios处理程序以触发File下载对话框

这些步骤基本上是可行的，但由于浏览器与CORS的关系，这些步骤相当复杂。一次一步：

当采用传输安全性时，在浏览器中执行的JavaScript可以[通过设计]

为了便于讨论，让我们假设我们希望服务器在一个名为X-Suggered-filename的HTTP头中传输建议的文件名。HTTP服务器告诉浏览器，可以使用以下标头将收到的自定义标头公开给JavaScript/Axios：

Access-Control-Expose-Headers: X-Suggested-Filename

配置HTTP服务器以设置此标头的确切方式因产品而异。

看见https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Expose-Headers 有关这些标准标题的完整解释和详细说明。

您的服务器端服务实现现在必须执行两件事：

1. 创建（二进制）文档并为响应分配正确的内容类型
2. 为客户端分配包含建议文件名的自定义头（X-Suggered-Filename）

根据您选择的技术堆栈，这可以通过不同的方式完成。我将使用JavaEE 7标准绘制一个示例，该标准应生成Excel报告：

    @GET
    @Path("/report/excel")
    @Produces("application/vnd.ms-excel")
    public Response getAllergyAndPreferencesReport() {

        // Create the document which should be downloaded
        final byte[] theDocumentData = .... 

        // Define a suggested filename
        final String filename = ... 
     
        // Create the JAXRS response
        // Don't forget to include the filename in 2 HTTP headers: 
        //
        // a) The standard 'Content-Disposition' one, and
        // b) The custom 'X-Suggested-Filename'  
        //
        final Response.ResponseBuilder builder = Response.ok(
                theDocumentData, "application/vnd.ms-excel")
                .header("X-Suggested-Filename", fileName);
        builder.header("Content-Disposition", "attachment; filename=" + fileName);

        // All Done.
        return builder.build();
    }

该服务现在发出二进制文档（本例中为Excel报告），设置正确的内容类型，并发送一个自定义HTTP头，其中包含保存文档时要使用的建议文件名。

这里有一些陷阱，所以让我们确保所有细节都正确配置：

1. 该服务响应@GET（即。HTTP GET），因此Axios调用必须是axios.get（...）。
2. 文档以字节流的形式传输，因此您必须告诉Axios将响应视为HTML5 Blob。（即响应类型：'blob'）。
3. 在这种情况下，文件保护程序JavaScript库用于弹出打开的浏览器对话框。然而，你可以选择另一个。

然后，Axios的框架实现将大致如下：

     // Fetch the dynamically generated excel document from the server.
     axios.get(resource, {responseType: 'blob'}).then((response) => {

        // Log somewhat to show that the browser actually exposes the custom HTTP header
        const fileNameHeader = "x-suggested-filename";
        const suggestedFileName = response.headers[fileNameHeader];
        const effectiveFileName = (suggestedFileName === undefined
                    ? "allergierOchPreferenser.xls"
                    : suggestedFileName);
        console.log(`Received header [${fileNameHeader}]: ${suggestedFileName}, effective fileName: ${effectiveFileName}`);

        // Let the user save the file.
        FileSaver.saveAs(response.data, effectiveFileName);

        }).catch((response) => {
            console.error("Could not Download the Excel report from the backend.", response);
        });

Answer 2

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

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作为道具传递给该组件，因此当该组件接收到道具时，它将重新渲染并下载该文件。

编辑：您也可以使用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');
});

希望这有帮助：）

Answer 3

更一般的解决方案

axios({
    url: 'http://api.dev/file-download', //your url
    method: 'GET',
    responseType: 'blob', // important
}).then((response) => {
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', 'file.pdf'); //or any other extension
    document.body.appendChild(link);
    link.click();
});

请在以下位置查看这些怪癖：https://gist.github.com/javilobo8/097c30a233786be52070986d8cdb1743

全部学分：https://gist.github.com/javilobo8