ExtJS中Ajax请求后window.open返回null致打印失败问题

我来帮你拆解下这个问题——核心根本不是作用域的锅，而是浏览器的弹窗拦截机制在作祟！

为什么原来的代码正常，加了Ajax就崩了？ #

• 原来的代码里，printRenderer.print()是在用户点击按钮的同步事件流里执行的：用户点击→直接调用print→window.open是用户主动交互触发的，浏览器会允许这个弹窗。
• 加了Ajax之后，printRenderer.print()是在异步的success回调里执行的：用户点击→发起Ajax请求（页面继续响应用户操作）→请求完成后才执行回调。这时候已经脱离了用户点击的同步上下文，浏览器会把这个弹窗判定为“自动弹出的广告/垃圾窗口”，直接拦截，导致win变成null，调用win.document.write自然就报错了。

解决方案：优先用「提前开窗口+回调填充」的方式 #

这是兼顾用户体验和浏览器规则的最优解，先在用户点击的同步阶段打开空白窗口（不会被拦截），再在Ajax回调里填充打印内容：

getPrintAction: function () {
  return new Ext.Action({
    scope : this,
    handler : function () {
      // 第一步：在用户点击时立即打开空白窗口，属于主动交互不会被拦截
      var printWin = window.open('', 'print', 'width=800,height=600');
      // 先写个加载提示，避免用户以为没反应
      printWin.document.write('<div style="text-align:center; margin-top:20px;">正在准备打印内容...</div>');
      printWin.document.close();

      var printRenderer = new BaseRenderer;
      var data = [...];
      Ext.Ajax.request({
        scope : this,
        params : {...},
        success: function (result) {
          var printData = [...];
          // 第二步：回调里操作已打开的窗口，填充打印内容
          printWin.document.open(); // 重新开启文档写入流
          printWin.document.write(printData);
          printWin.document.close();
          printWin.focus(); // 确保窗口获得焦点
          printWin.print(); // 直接触发打印，提升用户体验
        },
        failure: function() {
          // 失败时给用户反馈
          printWin.document.open();
          printWin.document.write('<div style="text-align:center; margin-top:20px; color:red;">加载打印内容失败，请重试</div>');
          printWin.document.close();
        }
      });
    }
  });
}

备选方案：同步Ajax（不推荐） #

如果你实在不想提前打开窗口，可以把Ajax改成同步请求，但这会阻塞页面直到请求完成，用户体验很差：

getPrintAction: function () {
  return new Ext.Action({
    scope : this,
    handler : function () {
      var printRenderer = new BaseRenderer;
      var data = [...];
      Ext.Ajax.request({
        scope : this,
        params : {...},
        async: false, // 强制同步请求
        success: function (result) {
          var printData = [...];
          var win = window.open('', 'print');
          win.document.write(printData);
          win.document.close();
        },
        failure: function() {
          // 注意：原来的callback()会立即执行，这里改成函数引用
          // callback();
        }
      });
    }
  });
}

调试小技巧 #

你可以在print方法里加一行console.log('win:', win)，如果输出是null，基本可以确定是弹窗拦截的问题。另外，直接在浏览器控制台执行window.open('', 'print')，看看会不会弹出拦截提示，也能快速验证问题根源。

内容的提问来源于stack exchange，提问作者Norgul