需求背景
遇到个需求，需要根据用户输入的id列表下载文件。一般情况下，下载文件用GET请求就能满足需求，但是，这个需求的请求参数中可能有上千个id，GET请求很可能超出浏览器参数长度限制。那么该怎么解决这个问题呢？
解决方案
请求方式基本可以确定只能用POST了，而直接用Ajax发POST请求是不行的。经过一番调研，总结两种方案：
- 可以后台接到请求后生成下载文件，放到静态文件目录，然后返回文件路径，前端拿到路径后用GET请求拉取文件。此方案可行，但是我们的静态文件都在亚马逊服务器上，还要把文件上传到亚马逊服务器，然后前端去亚马逊服务器拉取文件，总感觉绕个弯怪怪的。所以有了下边的方案2；
- 客户端使用POST表单提交请求，不要用Ajax。示例代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>下载文件示例程序</title> </head> <body> <button onclick="downloadExcel()">下载</button> <script type="text/javascript"> function downloadExcel(){ download("http://localhost:8080/download", {"ids": "10000,10002"}); } /** * post方式下载文件 * @param {[string]} url 接口 * @param {[json]} data 数据 * @return */ function download(url, data){ var body = document.getElementsByTagName('body')[0]; var form = document.createElement('form'); form.method = 'POST'; form.action = url; for(key in data){ var param = document.createElement('input'); param.type = "hidden"; param.name = key; param.value = data[key]; form.appendChild(param); } body.appendChild(form); form.submit(); body.removeChild(form); } </script> </body> </html>
亲测兼容老IE，而且页面无刷新，问题解决。
备注
本人主后台，非专业前端，前端代码写的不好，仅供参考。
![用 Canvas 编织璀璨星空图[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)