🚀使用 JavaScript 一键将 JSON 数据导出为 Excel 文件并下载

内容纲要

标签：JavaScript, Excel导出, JSON处理, SheetJS, 浏览器控制台, 数据开发, 无后端下载, 前端技巧, 可视化导出, Web实用教程

一、背景

要获取某个数据集网站上的分类数据，期望把4个层级的数据都拿出来存到Excel表里。

要求使用js在目标网站的console中直接处理接口数据并下载excel文件。

下面是一篇完整可发布的技术博客文章，教大家如何使用 JavaScript 将数据转换为 Excel 并下载，适用于浏览器控制台操作、前端项目实践、无后端导出需求场景。

二、正文

在前端项目中或浏览器控制台中，我们常常会遇到这种需求：

✨“我拿到了一个 JSON 数据数组，现在我想一键生成 Excel 表格并下载到本地，咋整？”✨

别急，今天就来教你如何用 JS 和一个强大的库 —— SheetJS（xlsx） 实现这个需求，不用后端，不需要 Node.js，纯前端导出，浏览器里就能搞定！

三、🎯最终效果

你将学会：

将复杂 JSON 数据“扁平化”
生成 Excel 表格（.xlsx 格式）
自动触发浏览器下载

四、🧰使用工具

JavaScript（原生）
SheetJS (xlsx)：支持浏览器端 Excel 处理的强大库

🧪 Step 1：加载 SheetJS 到网页中（浏览器控制台用法）

在浏览器控制台输入以下代码，一键注入 SheetJS：

const script = document.createElement("script");
script.src = "https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js";
document.head.appendChild(script);

加载完毕后，全局变量 XLSX 就能用了！

📦 Step 2：定义你的 JSON 数据

例如我们有如下结构的数据：

const data = [
  {
    id: 1,
    name: { en: "Video", zh: "视频" },
    attrs: {
      content: { en: "MP4 Format", zh: "MP4 格式" },
      url: "https://example.com/video.mp4"
    }
  },
  {
    id: 2,
    name: { en: "Image", zh: "图像" },
    attrs: null
  }
];

🧹 Step 3：扁平化 JSON 数据

我们只保留需要的字段，并将嵌套结构展开成扁平字段：

const flatData = data.map(item => ({
  ID: item.id,
  英文名称: item.name?.en || '',
  中文名称: item.name?.zh || '',
  属性英文描述: item.attrs?.content?.en || '',
  属性中文描述: item.attrs?.content?.zh || '',
  文件URL: item.attrs?.url || ''
}));

📝 Step 4：生成并下载 Excel 文件

调用以下函数，生成 .xlsx 文件并自动下载：

function downloadExcelFromData(flatData, filename = "output.xlsx") {
  const ws = XLSX.utils.json_to_sheet(flatData);   // 创建工作表
  const wb = XLSX.utils.book_new();                 // 新建工作簿
  XLSX.utils.book_append_sheet(wb, ws, "Data");     // 添加工作表
  XLSX.writeFile(wb, filename);                     // 下载文件
}

📣 等待 XLSX 加载完毕后，执行：

downloadExcelFromData(flatData, "dataset_types.xlsx");

🎉Boom！你的 Excel 就下来了！

五、🧠实用贴士

✅ 判断 SheetJS 是否加载完毕

typeof XLSX === 'object'  // 为 true 表示可以使用

✅ 多次使用

你可以将原始数据保存为全局变量：

window.__myData = [...];

后续反复导出，不用每次都粘数据！

六、💡应用场景

数据可视化时导出报表
在控制台快速抓取并保存表格数据
Web 项目中为用户提供“导出 Excel”功能
不用后端、脱网场景也能导出

七、🧩完整代码块（复制即用）

// Step 1: 注入 SheetJS
const script = document.createElement("script");
script.src = "https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js";
document.head.appendChild(script);

// Step 2: 数据（替换成你自己的）
const data = [
  {
    id: 1,
    name: { en: "Video", zh: "视频" },
    attrs: {
      content: { en: "MP4 Format", zh: "MP4 格式" },
      url: "https://example.com/video.mp4"
    }
  }
];

// Step 3: 扁平化
const flatData = data.map(item => ({
  ID: item.id,
  英文名称: item.name?.en || '',
  中文名称: item.name?.zh || '',
  属性英文描述: item.attrs?.content?.en || '',
  属性中文描述: item.attrs?.content?.zh || '',
  文件URL: item.attrs?.url || ''
}));

// Step 4: 下载 Excel
function downloadExcelFromData(flatData, filename = "output.xlsx") {
  const ws = XLSX.utils.json_to_sheet(flatData);
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, "Data");
  XLSX.writeFile(wb, filename);
}

// Step 5: 调用
if (window.XLSX) {
  downloadExcelFromData(flatData, "dataset_types.xlsx");
} else {
  console.log("⏳ SheetJS 还在加载，请稍等片刻再试！");
}

八、🔚总结

用 JavaScript 导出 Excel 再也不是“高级功能”了，只需几行代码，无后端无打包，全前端一键搞定！

让你的数据飞入 Excel，飞入用户桌面，再飞进老板的满意眼神 ✨。