如何通过AJAX提交表单至新标签页以实现PDF打印功能？

核心问题：你当前用的$.ajax异步提交方式，是在后台悄悄处理请求，浏览器不会主动把服务器返回的PDF渲染到新标签页里。要实现「提交后在新标签页生成PDF」的需求，得换一种提交逻辑，下面给你两种实用方案：

方法一：直接修改原表单属性提交（最简单） #

如果不需要做额外的异步前置处理（比如数据验证、字段加工），直接给表单加上target="_blank"属性，用原生提交方式就能搞定：

var form = $("#formname");
// 给表单设置提交地址、请求方法和新标签页目标
form.attr({
  "action": "url.php",
  "method": "POST",
  "target": "_blank"
}).submit();

提交后浏览器会自动在新标签页加载url.php返回的PDF文件，完全匹配你的「全部打印生成PDF」需求。

方法二：先做异步处理，再动态创建表单提交 #

如果需要先通过Ajax完成前置操作（比如验证数据合法性、获取额外参数），之后再打开新标签页生成PDF，可以用动态创建临时表单的方式：

var form = $("#formname");
var formData = form.serialize();

// 这里先执行你的异步前置逻辑，比如数据验证
$.ajax({
  type: "POST",
  url: "your-validation-api.php", // 示例：验证接口
  data: formData,
  success: function(validationResult) {
    if (validationResult.isValid) { // 假设验证通过
      // 动态创建一个隐藏的临时表单
      var tempForm = $("<form>")
        .attr({
          "method": "POST",
          "action": "url.php",
          "target": "_blank"
        })
        .css("display", "none")
        .appendTo("body");

      // 把原表单的所有数据转成隐藏输入项，添加到临时表单
      $.each(formData.split("&"), function() {
        var [name, value] = this.split("=");
        $("<input>")
          .attr({
            "type": "hidden",
            "name": decodeURIComponent(name),
            "value": decodeURIComponent(value)
          })
          .appendTo(tempForm);
      });

      // 提交临时表单，触发新标签页打开PDF
      tempForm.submit();
      // 提交完成后移除临时表单，避免页面冗余
      tempForm.remove();
    }
  }
});

为什么原来的Ajax方案不行？ #

$.ajax会把服务器返回的PDF二进制数据存到success回调的data参数里，但浏览器不会自动把这个数据渲染成新标签页的PDF文件。而表单提交（配合target="_blank"）会让浏览器直接解析服务器的响应头，自动识别PDF格式并在新标签页打开。

内容的提问来源于stack exchange，提问作者Andreas Holzmüller