如何通过POST请求生成SVG文件并下载，同时避免页面跳转？

我懂你要的效果——通过POST提交数据到download.php生成SVG文件供下载，但又不想让页面跳转，对吧？原来的表单提交方式确实会触发页面导航，这里给你几个实用的解决方案：

方案一：使用Fetch API（现代浏览器推荐） #

这是目前最简洁的方式，利用Fetch发送POST请求，然后将响应转为Blob对象，再通过创建临时<a>标签触发下载：

// 获取表单元素
const form = document.getElementById('svgform');

// 绑定触发下载的事件（比如按钮点击）
document.getElementById('downloadBtn').addEventListener('click', async () => {
  // 收集表单数据
  const formData = new FormData(form);
  
  try {
    // 发送POST请求到download.php
    const response = await fetch('download.php', {
      method: 'POST',
      body: formData
    });
    
    if (!response.ok) {
      throw new Error('请求失败');
    }
    
    // 将响应转为Blob对象
    const blob = await response.blob();
    // 创建临时URL
    const url = URL.createObjectURL(blob);
    
    // 创建临时a标签
    const a = document.createElement('a');
    a.href = url;
    // 设置下载文件名（如果后端没指定，这里可以手动设置）
    a.download = 'myfilename.svg';
    // 触发点击
    a.click();
    
    // 清理临时资源
    URL.revokeObjectURL(url);
    a.remove();
  } catch (error) {
    console.error('下载出错:', error);
    // 这里可以添加错误提示，比如alert('下载失败，请重试')
  }
});

方案二：使用XMLHttpRequest（兼容老浏览器） #

如果需要支持一些不支持Fetch的老浏览器，可以用XHR来实现：

const form = document.getElementById('svgform');
const formData = new FormData(form);

const xhr = new XMLHttpRequest();
xhr.open('POST', 'download.php', true);
xhr.responseType = 'blob'; // 指定响应类型为Blob

xhr.onload = function() {
  if (this.status === 200) {
    const blob = this.response;
    const url = URL.createObjectURL(blob);
    
    const a = document.createElement('a');
    a.href = url;
    a.download = 'myfilename.svg';
    document.body.appendChild(a);
    a.click();
    
    // 清理资源
    URL.revokeObjectURL(url);
    document.body.removeChild(a);
  } else {
    console.error('请求失败，状态码:', this.status);
  }
};

xhr.onerror = function() {
  console.error('网络请求出错');
};

xhr.send(formData);

注意事项 #

• 确保download.php返回的响应头正确设置了Content-Type: application/svg+xml和Content-Disposition: attachment; filename="myfilename.svg"，这样浏览器才能正确识别为下载文件。
• 如果后端返回的文件名有特殊需求，也可以从响应头的Content-Disposition中解析出来，替换代码里的a.download值。
• 临时创建的<a>标签记得用完就移除，避免DOM冗余。

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