点击按钮后如何用JavaScript调用返回PDF的控制器？

你遇到的问题其实很常见——AJAX类的RPC方法（比如ajax.rpc或rpc.query）主要是用来处理文本/JSON格式的响应，它们不会触发浏览器默认的文件下载行为，而直接访问URL时浏览器会自动识别二进制文件并启动下载流程。下面给你几个可行的解决方案：

方案1：用隐藏的<a>标签模拟点击（最简单） #

这是最直接的方法，通过创建一个隐藏的链接，让浏览器发起请求，自动处理PDF下载：

function downloadPDF() {
  // 创建a标签
  const downloadLink = document.createElement('a');
  // 设置控制器URL，替换成你的实际地址
  downloadLink.href = '/path/to/your/pdf-controller';
  // 可选：指定下载后的文件名
  downloadLink.download = 'my-document.pdf';
  
  // 把标签加入页面（有些浏览器需要这个才能触发点击）
  document.body.appendChild(downloadLink);
  // 模拟点击
  downloadLink.click();
  // 移除标签
  document.body.removeChild(downloadLink);
}

然后给按钮绑定点击事件：

<button onclick="downloadPDF()">下载PDF</button>

方案2：如果需要发送POST参数（比如带表单数据） #

如果你的控制器需要通过POST接收参数，就用隐藏表单提交的方式：

function downloadPDFWithParams() {
  // 创建表单
  const downloadForm = document.createElement('form');
  downloadForm.method = 'POST';
  downloadForm.action = '/path/to/your/pdf-controller';
  downloadForm.style.display = 'none';
  
  // 添加需要传递的参数（比如用户ID、筛选条件）
  const userIdInput = document.createElement('input');
  userIdInput.type = 'hidden';
  userIdInput.name = 'user_id';
  userIdInput.value = '123';
  downloadForm.appendChild(userIdInput);
  
  // 加入页面并提交
  document.body.appendChild(downloadForm);
  downloadForm.submit();
  document.body.removeChild(downloadForm);
}

按钮调用这个函数即可，浏览器会自动处理控制器返回的PDF文件。

方案3：通过AJAX获取二进制数据后触发下载（适合需要自定义请求的场景） #

如果必须用AJAX（比如需要携带认证Token、先校验响应状态），可以用fetch或XMLHttpRequest获取Blob对象，再生成下载链接：

async function downloadPDFViaAJAX() {
  try {
    const response = await fetch('/path/to/your/pdf-controller', {
      method: 'GET', // 改成POST如果需要
      headers: {
        // 比如携带认证令牌
        'Authorization': 'Bearer ' + yourAuthToken,
      }
    });
    
    if (!response.ok) {
      throw new Error(`请求失败：${response.status}`);
    }
    
    // 将响应转为Blob对象（二进制数据）
    const pdfBlob = await response.blob();
    // 生成临时URL
    const pdfUrl = URL.createObjectURL(pdfBlob);
    
    // 用a标签触发下载
    const downloadLink = document.createElement('a');
    downloadLink.href = pdfUrl;
    downloadLink.download = 'my-document.pdf';
    document.body.appendChild(downloadLink);
    downloadLink.click();
    
    // 清理临时URL，避免内存泄漏
    URL.revokeObjectURL(pdfUrl);
    document.body.removeChild(downloadLink);
  } catch (error) {
    console.error('下载出错：', error);
    alert('PDF下载失败，请检查后重试');
  }
}

为什么ajax.rpc/rpc.query不行？ #

这类RPC工具的设计目标是获取可解析的文本/JSON数据，然后在JavaScript中处理业务逻辑，它们不会触发浏览器的文件下载机制——即使拿到了PDF的二进制数据，也需要手动处理成Blob再触发下载，反而不如上面的方法直接。

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