Vue项目中实现JSON与Excel互转的最优工具库推荐咨询

首推SheetJS（xlsx），这是前端生态里最常用的处理Excel与JSON互转的工具库，轻量、稳定，完全支持你的导出（JSON→Excel）和导入（Excel→JSON）需求，Vue项目中集成成本极低。

核心功能实现示例 #

1. 安装依赖 #

npm install xlsx --save

2. JSON导出为Excel #

在Vue组件中编写导出方法：

import XLSX from 'xlsx'

export default {
  methods: {
    exportToExcel() {
      // 假设从后端获取的JSON数据
      const jsonData = [
        { name: '张三', age: 25, job: '前端开发' },
        { name: '李四', age: 28, job: '后端开发' }
      ]
      // 将JSON转为工作表
      const worksheet = XLSX.utils.json_to_sheet(jsonData)
      // 创建工作簿并添加工作表
      const workbook = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(workbook, worksheet, '员工信息')
      // 导出文件
      XLSX.writeFile(workbook, '员工信息.xlsx')
    }
  }
}

3. Excel导入转为JSON #

编写文件上传后的处理方法：

import XLSX from 'xlsx'

export default {
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0]
      if (!file) return
      
      const reader = new FileReader()
      reader.onload = (e) => {
        // 读取文件内容
        const data = new Uint8Array(e.target.result)
        const workbook = XLSX.read(data, { type: 'array' })
        // 获取第一个工作表的数据
        const worksheet = workbook.Sheets[workbook.SheetNames[0]]
        // 转为JSON格式
        const jsonData = XLSX.utils.sheet_to_json(worksheet)
        // 后续处理逻辑，比如提交给后端或渲染页面
        console.log('导入的JSON数据:', jsonData)
      }
      reader.readAsArrayBuffer(file)
    }
  }
}

备选工具库 #

如果需要更复杂的Excel格式处理（比如单元格样式、合并单元格、公式支持），可以用exceljs，它功能更全面，但体积比SheetJS大，适合有高级需求的场景，同样支持双向转换。

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