如何使用JS在客户端将polyline点位JSON数据保存到本地硬盘文件

云原生阿岚

2026-10-12

纯客户端实现本地保存JSON文件方案

你可以直接通过HTML5标准的Blob对象+动态a标签下载的方式实现，完全不需要服务端支持，所有逻辑都在浏览器本地执行，不会上传任何数据。

修改后的完整save函数代码

function save() {
  // 先初始化存储数组，避免未定义报错
  const arrayOfPolylines = [];
  const allPolylines = document.getElementsByTagName("polyline");
  for (let i = 0; i < allPolylines.length; i++) {
    arrayOfPolylines.push(allPolylines[i].getAttribute("points"));
  }
  // 后两个参数用于格式化JSON，方便后续手动查看，不需要可以删掉
  const toSave = JSON.stringify(arrayOfPolylines, null, 2);

  // 核心下载逻辑
  // 1. 将JSON字符串转为Blob对象
  const blob = new Blob([toSave], { type: "application/json" });
  // 2. 生成临时访问URL
  const tempUrl = URL.createObjectURL(blob);
  // 3. 动态创建隐藏的a标签
  const downloadLink = document.createElement("a");
  downloadLink.style.display = "none";
  downloadLink.href = tempUrl;
  // 定义保存的文件名，可自定义修改
  downloadLink.download = "polyline-points.json";
  // 4. 插入DOM后触发点击，启动下载
  document.body.appendChild(downloadLink);
  downloadLink.click();
  // 5. 清理资源，避免内存泄漏
  document.body.removeChild(downloadLink);
  URL.revokeObjectURL(tempUrl);
}