怎样用JavaScript保存文件？

纯原生JavaScript实现文件保存

如果不想引入额外的第三方库，我们可以通过原生JavaScript的API组合实现简单的文件保存功能，核心依赖Blob对象和动态创建下载链接的方式。

基础实现步骤

实现流程主要分为三步：首先将要保存的内容转换为Blob对象，然后生成该对象的临时URL，最后创建a标签触发下载行为。

// 要保存的文件内容
const fileContent = "这是要保存的文本内容，你可以替换为任意字符串、JSON数据等";
// 创建Blob对象，指定文件类型和字符编码
const blob = new Blob([fileContent], { type: "text/plain;charset=utf-8" });
// 生成Blob对象的临时URL
const fileUrl = URL.createObjectURL(blob);
// 创建a标签
const downloadLink = document.createElement("a");
downloadLink.href = fileUrl;
// 设置下载的文件名
downloadLink.download = "示例文件.txt";
// 将a标签添加到页面中
document.body.appendChild(downloadLink);
// 触发a标签的点击事件
downloadLink.click();
// 移除a标签，释放临时URL
document.body.removeChild(downloadLink);
URL.revokeObjectURL(fileUrl);

保存不同类型文件

上面的示例保存的是文本文件，我们只需要调整Blob的type属性和内容，就可以保存其他类型的文件。

• 保存JSON文件：将内容转为JSON字符串，type设置为application/json
• 保存CSV文件：内容按CSV格式拼接，type设置为text/csv;charset=utf-8
• 保存图片：如果是base64格式的图片，先转换为Blob再按上述流程操作

// 保存JSON文件的示例
const jsonData = { name: "测试数据", value: 123 };
const jsonStr = JSON.stringify(jsonData, null, 2);
const jsonBlob = new Blob([jsonStr], { type: "application/json;charset=utf-8" });
const jsonUrl = URL.createObjectURL(jsonBlob);
const jsonLink = document.createElement("a");
jsonLink.href = jsonUrl;
jsonLink.download = "数据.json";
document.body.appendChild(jsonLink);
jsonLink.click();
document.body.removeChild(jsonLink);
URL.revokeObjectURL(jsonUrl);

使用FileSaver.js简化操作

如果需要更稳定的兼容性和更简洁的代码，可以使用第三方库FileSaver.js，它封装了不同浏览器的兼容逻辑，使用起来非常方便。

引入FileSaver.js

可以通过CDN引入，也可以下载到本地引入：

<script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js"></script>

基本使用方式

引入之后直接使用saveAs方法即可，不需要自己处理DOM操作和URL释放。

// 保存文本文件
const content = "使用FileSaver.js保存的文件内容";
const blob = new Blob([content], { type: "text/plain;charset=utf-8" });
saveAs(blob, "FileSaver示例.txt");

// 保存JSON文件
const data = { id: 1, title: "测试" };
const dataBlob = new Blob([JSON.stringify(data)], { type: "application/json" });
saveAs(dataBlob, "数据.json");

注意事项

• 该方法只能触发浏览器的下载行为，无法直接指定文件保存到本地的具体路径，保存位置由浏览器的下载设置决定
• 部分旧版本浏览器可能不支持Blob或者URL.createObjectURL，使用前可以做兼容性判断
• 如果保存的内容过大，生成Blob的过程可能会占用较多内存，需要注意性能问题
• 如果是下载服务器上的已有文件，也可以直接使用a标签指向文件地址，设置download属性即可，不需要自己构造Blob

注意：前端JavaScript无法写入用户指定的本地文件路径，所有文件保存操作都是触发浏览器下载，最终保存位置由用户浏览器配置决定。

兼容处理示例

如果需要考虑旧浏览器的兼容，可以添加简单的判断逻辑：

function saveFile(content, filename, type = "text/plain;charset=utf-8") {
  if (!content || !filename) return;
  try {
    const blob = new Blob([content], { type });
    // 判断是否支持FileSaver.js
    if (typeof saveAs !== "undefined") {
      saveAs(blob, filename);
    } else if (window.navigator.msSaveOrOpenBlob) {
      // 兼容IE浏览器
      window.navigator.msSaveOrOpenBlob(blob, filename);
    } else {
      // 原生实现
      const url = URL.createObjectURL(blob);
      const link = document.createElement("a");
      link.href = url;
      link.download = filename;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      URL.revokeObjectURL(url);
    }
  } catch (e) {
    console.error("文件保存失败：", e);
  }
}

// 调用示例
saveFile("兼容处理的文件内容", "兼容测试.txt");

JavaScript文件保存FileSaver.jsBlob对象前端文件操作修改时间：2026-05-29 22:59:06