POST方式下载文件，使用form代替ajax发送请求

最新推荐文章于 2025-06-20 15:05:16 发布

爬楼梯的小怪

最新推荐文章于 2025-06-20 15:05:16 发布

阅读量3.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：摘录文章标签： JavaScript post下载文件 form代替ajax 文件下载

本文链接：https://blog.youkuaiyun.com/lijiafa/article/details/89382612

摘录专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种在前端请求后台文件批量下载PDF文件的方法，解决了因使用nginx负载均衡导致的二次请求问题。通过创建临时form表单并使用POST方式提交，确保一次请求即可完成文件下载，特别适用于html转pdf的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考链接：https://blog.youkuaiyun.com/wild46cat/article/details/52437554

需求说明：

前端请求后台文件批量下载页面表单html的pdf文件，之前采用的方式是先用ajax请求在服务器生成文件，然后通过链接访问下载，这是两次请求完成下载，但是项目使用了nginx实现负载均衡，所以两次请求可能不会访问同一个应用服务器，导致第二次请求无法访问到第一次请求生成的文件，所以需要一次请求即可下载文件。

问题：

下载html转成的pdf文件时，需要浏览器渲染，需要从前台获取到完整的html代码，传到后台，涉及到很多数据，所以不能用get请求；
ajax可以使用post请求，但是不会触发浏览器下载文件的动作。

解决方式：使用临时form表单使用post方式提交消息

1. 创建函数

var DownLoadFile = function (options) {
        var config = $.extend(true, { method: 'post' }, options);
        var $iframe = $('<iframe id="down-file-iframe" enctype="multipart/form-data" />');
        var $form = $('<form target="down-file-iframe" method="' + config.method + '" />');
        $form.attr('action', config.url);
        for (var key in config.data) {
            $form.append('<input type="hidden" name="' + key + '" value="' + config.data[key] + '" />');
        }
        $iframe.append($form);
        $(document.body).append($iframe);
        $form[0].submit();
        $iframe.remove();
    };

2. 调用函数

var postData = {"file_ids":arrSelIDs,"form_html":arrSelHTMLs,"isarray":isArray,"basepath":basepath};
uiConfirm("您确定导出选中的公文附件？",function () {
         DownLoadFile({url:'BPMSyncAction.do?_funccode_=FileExportAttToZip',data:postData});
});