不依赖后端的情况下用 JavaScript 实现 Excel 的 导入 和 导出

在前端 不依赖后端 的情况下，用 JavaScript 实现 Excel 的 导入（读取） 和 导出（生成），目前最成熟、最常用的方案是 SheetJS（xlsx）。

下面我从 原理 → 导入 → 导出 → 常见坑 一步步讲清楚，一般都可以直接上手。

---

一、核心思路（先搞懂原理）

1. 前端如何“导入” Excel？

流程是：

用户选择 Excel 文件
→ input[type=file]
→ FileReader 读取为 ArrayBuffer
→ xlsx 解析成 JS 对象

2. 前端如何“导出” Excel？

流程是：

JS 中的数据（数组 / 对象）
→ xlsx 转为 Sheet
→ 生成 Workbook
→ 浏览器触发下载

---

二、准备工作：引入 xlsx 库

CDN（最简单，推荐）

<script src="https://www.xtonner.com/public/cdn/js/xlsx.full.min.js"></script>

npm（工程化项目）

npm install xlsx

import * as XLSX from 'xlsx'

---

三、前端导入 Excel（读取 Excel）

1. HTML 文件选择

<input type="file" id="excelInput" accept=".xlsx,.xls" />

---

2. JavaScript 读取并解析

document.getElementById('excelInput').addEventListener('change', function (e) {
    const file = e.target.files[0]
    if (!file) return

    const reader = new FileReader()

    reader.onload = function (e) {
        const data = e.target.result

        // 读取 workbook
        const workbook = XLSX.read(data, { type: 'array' })

        // 获取第一个 sheet
        const sheetName = workbook.SheetNames[0]
        const worksheet = workbook.Sheets[sheetName]

        // 转成 JSON
        const jsonData = XLSX.utils.sheet_to_json(worksheet)

        console.log(jsonData)
    }

    reader.readAsArrayBuffer(file)
})

---

3. Excel → JS 数据结构示例

Excel 内容：

name	age	city
Tom	18	BJ
Jack	20	SH

得到的 jsonData：

[
  { name: "Tom", age: 18, city: "BJ" },
  { name: "Jack", age: 20, city: "SH" }
]

4. 非常适合直接用于：

• 表格渲染

• 批量导入

• 前端校验

• 提交给后端 API

---

四、前端导出 Excel（生成并下载）

1. 准备数据（数组对象）

const data = [
  { name: 'Tom', age: 18, city: 'BJ' },
  { name: 'Jack', age: 20, city: 'SH' }
]

---

2. 转成 Excel 并下载

function exportExcel(data) {
    // 1. JSON → Sheet
    const worksheet = XLSX.utils.json_to_sheet(data)

    // 2. 创建 Workbook
    const workbook = XLSX.utils.book_new()
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')

    // 3. 导出
    XLSX.writeFile(workbook, '用户数据.xlsx')
}

调用：

exportExcel(data)

浏览器会 直接下载 Excel 文件。

---

五、进阶用法（实战中常用）

1. 自定义表头顺序 & 中文表头

const data = [
  { name: 'Tom', age: 18, city: '北京' }
]

const worksheet = XLSX.utils.json_to_sheet(data, {
  header: ['name', 'age', 'city']
})

// 自定义中文表头
worksheet['A1'].v = '姓名'
worksheet['B1'].v = '年龄'
worksheet['C1'].v = '城市'

---

2. 导出空模板（很常见）

const template = [
  { 姓名: '', 年龄: '', 城市: '' }
]

const ws = XLSX.utils.json_to_sheet(template)
const wb = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(wb, ws, '模板')
XLSX.writeFile(wb, '导入模板.xlsx')

---

3. 读取 Excel 时保留空行

XLSX.utils.sheet_to_json(worksheet, {
  defval: ''   // 空单元格不丢失
})

---

六、常见坑 & 注意事项（很重要）

× 1. 不能直接读 Excel 路径

浏览器 无法直接访问本地文件路径，只能通过 <input type="file">

---

× 2. 大文件性能问题

• 超过 5~10MB 的 Excel

• 行数 > 5万

建议：

• 分 Sheet

• 后端处理

• Web Worker

---

× 3. 样式支持有限

SheetJS 免费版不支持复杂样式（颜色、边框、合并单元格）

需要：

• xlsx-style（老）

• 商业版 SheetJS Pro

---

七、适合你的使用场景总结

场景	是否推荐前端
简单导入导出	√ 强烈推荐
批量导入校验	√
大数据量	× 后端更合适
强格式 Excel	×

---

八、最后一句话总结

前端 Excel 导入导出 = input + FileReader + xlsx