如何使用JavaScript写入数据到文件并实现本地下载？

兼容全格式的通用实现 #

要兼容txt、pdf、图片等所有格式的下载，核心是不要用默认的responseText（文本格式）接收响应，二进制文件用文本格式接收会出现内容损坏、乱码的问题，统一用Blob类型承载响应即可，具体实现逻辑：

• 初始化XHR请求时，将responseType设置为blob，该类型可以无损承载任意文本、二进制格式的文件内容
• 请求成功后拿到Blob对象，通过URL.createObjectURL()生成浏览器可识别的临时本地地址
• 动态创建不可见的<a>标签，绑定临时地址，配置download属性指定保存的文件名（带对应格式后缀），触发标签点击事件完成下载
• 操作完成后移除临时DOM节点、释放临时URL，避免不必要的内存占用

对应代码示例：

const xhrdoc = new XMLHttpRequest();
xhrdoc.open('GET', '远程文件的请求地址', true);
// 核心配置，必须在send()调用前设置
xhrdoc.responseType = 'blob';

xhrdoc.onload = function () {
  if (xhrdoc.status !== 200) return;
  const fileData = xhrdoc.response;
  // 生成临时下载链接
  const tempUrl = URL.createObjectURL(fileData);
  // 创建触发下载的a标签
  const downloadLink = document.createElement('a');
  downloadLink.href = tempUrl;
  // 自定义保存的文件名，必须和文件格式匹配，例如demo.txt、report.pdf、cover.png
  downloadLink.download = '自定义文件名';
  // 触发点击
  document.body.appendChild(downloadLink);
  downloadLink.click();
  // 清理资源
  document.body.removeChild(downloadLink);
  URL.revokeObjectURL(tempUrl);
};

xhrdoc.send();

这个方案不需要针对不同文件格式做特殊处理，覆盖所有常见文件类型的下载需求。

针对txt文件的快速实现（适配你当前的代码逻辑） #

如果你当前首要需求是实现txt下载，且已经能通过xhrdoc.responseText拿到完整的文本内容，可以直接基于现有返回数据实现，不需要调整请求配置：

// 直接使用你已经拿到的文本内容
const txtContent = xhrdoc.responseText;
// 生成txt格式对应的Blob，指定编码避免乱码
const txtBlob = new Blob([txtContent], { type: 'text/plain;charset=utf-8' });
const tempUrl = URL.createObjectURL(txtBlob);

const downloadLink = document.createElement('a');
downloadLink.href = tempUrl;
downloadLink.download = '保存的文件名.txt';
document.body.appendChild(downloadLink);
downloadLink.click();

document.body.removeChild(downloadLink);
URL.revokeObjectURL(tempUrl);

如果下载后的txt文件出现乱码，调整Blob配置里的charset参数和文件实际编码匹配即可。

注意：如果远程文件和当前页面不同源，需要目标服务器配置跨域访问许可，否则前端无法通过AJAX拿到文件内容，这种情况可以让后端在响应头加上Content-Disposition: attachment，直接访问文件地址即可触发下载，不需要额外写JS逻辑。

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