8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

如何使用 axios 下载文件

Austin Wolff 2月前

167 0

我正在使用 axios 进行基本的 http 请求,例如 GET 和 POST,效果很好。现在我也需要能够下载 Excel 文件。使用 axios 可以实现吗?如果可以,有人有示例代码吗?

我正在使用 axios 进行基本的 http 请求,例如 GET 和 POST,效果很好。现在我也需要能够下载 Excel 文件。使用 axios 可以实现这一点吗?如果可以,有人有示例代码吗?如果没有,我还可以在 React 应用程序中使用什么来做同样的事情?

帖子版权声明 1、本帖标题:如何使用 axios 下载文件
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由Austin Wolff在本站《express》版块原创发布, 转载请注明出处!
最新回复 (0)
  • 下载文件(使用 Axios 和 Security)

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

    你需要做三件事:

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

    这些步骤大部分都是可行的 - 但由于浏览器与 CORS 的关系而变得相当复杂。一步一步来:

    1. 配置你的 (HTTP) 服务器

    在使用传输安全性时,浏览器中执行的 JavaScript [根据设计] 只能访问 HTTP 服务器实际发送的 6 个 HTTP 标头。如果我们希望服务器建议下载的文件名,我们必须通知浏览器“可以”授予 JavaScript 访问将传输建议文件名的其他标头的权限。

    为了便于讨论,我们假设我们希望服务器在名为 X-Suggested-Filename 的 。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 https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Expose-Headers

    2.实现服务端服务

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

    1. 创建(二进制)文档并为响应分配正确的 ContentType
    2. 分配包含客户端建议文件名的自定义标头 (X-Suggested-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 标头。

    3. 为已接收文档实现 Axios 处理程序

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

    1. 该服务响应@GET(即HTTP GET),因此Axios调用必须是“axios.get(...)”。
    2. 该文档以字节流的形式传输,因此您必须告诉 Axios 将响应视为 HTML5 Blob。(即 responseType: '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);
            });
    
返回
作者最近主题: