一篇文章介绍前端JSON文件转为Excel

最新推荐文章于 2024-05-16 13:24:58 发布

Mr.怪兽

最新推荐文章于 2024-05-16 13:24:58 发布

阅读量2.2k

点赞数 1

文章标签：前端 json excel javascript vue Powered by 金山文档

本文链接：https://blog.csdn.net/superherooooss/article/details/128905258

版权

下载依赖

npm i xlsx

案例代码

<template>
  <div>JSON数据导出为Excel</div>
  <button @click="dataToExcel">导出Excel文件</button>
</template>

<script setup>
import * as XLSX from 'xlsx'

let data = [{
  name: "小明",
  age: 18,
  sex: '男',
  hobby: '看书'
}, {
  name: "小红",
  age: 18,
  sex: '女',
  hobby: '逛街'
}, {
  name: "小王",
  age: 20,
  sex: '男',
  hobby: '玩游戏'
}, {
  name: "小张",
  age: 25,
  sex: '男',
  hobby: '打球'
},]
// 对象中key -> excel 中的name 映射
const enNameToCnName = {
  name: '姓名',
  age: '年龄',
  sex: '性别',
  hobby: '爱好'
}
const dataToExcel = () => {
  let excelData = data.map(n => {
    // 获取数组中每个对象
    let newItem = []
    Object.keys(n).forEach(k => {
      // console.log('k---->', k);
      // console.log('enNameToCnName->>>', enNameToCnName[k]);
      //console.log('n[k]----->', n[k]);
      
    // 在数组中拼接中文的键值对
      newItem[enNameToCnName[k]] = n[k]
    })
    return newItem
  })
  const xlsxObj = {
    // 指定有序的sheet 的 name 
    SheetNames: ['sheet1'],
    // 表格数据内容
    Sheets: {
      ['sheet1']: XLSX.utils.json_to_sheet(excelData)
    }
  }
  console.log(excelData);

  XLSX.writeFile(xlsxObj, '导出文件.xlsx')

}
</script>

<style>
</style>