POST方式导出Excel_html post导出excel设置参数-优快云博客

本文介绍两种使用POST请求导出Excel的方法。方法一通过创建隐藏表单实现，适用于参数过多或URL过长的情况。方法二利用iframe进行仿异步POST提交，避免页面刷新，提升用户体验。

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

1.方法一：

一般情况下，我们通过ajax获取数据都是采用get方式获取，但如果ajax的请求url过长时，get方式由于浏览器对url长度不同会导致无法正常获取数据，尤其是IE。

这时候，我们需要通过post请求的方式获取数据，而如果我们需要通过post方式导出Excel表格，则需要通过表单提交的方式导出Excel。

function postExcelFile(params, url) { //params是post请求需要的参数，url是请求url地址
    var form = document.createElement("form");
    form.style.display = 'none';
    form.action = url;
    form.method = "post";
    document.body.appendChild(form);

    for(var key in params){
      var input = document.createElement("input");
      input.type = "hidden";
      input.name = key;
      input.value = params[key];
      form.appendChild(input);
    }

    form.submit();
    form.remove();
  }
  //点击导出按钮导出excel表格
  exportButton.onclick = function() {
    var params = {};
    postExcelFile(params, "http://www.XXX_excel");
  }

嘿嘿，完美解决问题！如果后端返回服务器异常，则需要后台配合修改了。

链接：https://blog.youkuaiyun.com/qq_33036599/article/details/80844430

2.方法二. 采用Post请求的方式提交参数并导出excel

一般情况下，我们都是采用get请求的方式导出excel。例如采用如下方式：

var exportUrl = '/xxx;';
window.open(exportUrl);

导出excel所需的逻辑参数拼接到url上即可。

但是，如果我们需要提交大量的参数到后台才能导出excel，亦或者我们提交的参数中有中文，get提交乱码了，那么就可能想使用post提交的方式来导出excel。因为post提交支持更多的参数，从而能解决get提交对url长度的限制问题。

然而，一般的post提交表单，意味着主页面也会一起刷新，体验较差。那么，这里将提供一个仿异步post提交导出excel的实例。

代码如下：

_export = {
        canExport:false,
        post:function(data,exportUrl) {
            _export.canExport = true;
            if ($('#exportIframe').length > 0) {
                $('#exportIframe').remove();
            }
            $('body').append('<iframe id="exportIframe" width="0" height="0" src="'+domain+'/export"></iframe>');
            $('#exportIframe').load(function() {
                if (_export.canExport) {
                    var formData = '<form method="post" action='+exportUrl+' >';
                    for (var name in data) {
                        formData = formData + '<input type="text" name="'+name+'" value="'+data[name]+'" />';
                    }
                    formData = formData + '<input type="submit" id="submitExportForm"/>';
                    formData = formData + '</form>';
                    $(this).contents().find('body').append(formData);
                    $(this).contents().find('#submitExportForm').click();
                    _export.canExport = false;
                }
            });
        }
}

调用方式：