xlsx.js: 基于 JavaScript 的 Excel 文件读写库

如果你需要在浏览器端处理 Excel 文件，那么 xlsx.js 可能是一个不错的选择。这是一个基于 JavaScript 的库，可以方便地读取、创建和修改 Excel 文件。

1、安装

可以通过 npm 或者直接下载源码的方式来获取 xlsx.js 库：

npm install xlsx

或者从 CDN 加载：

<script src="https://unpkg.com/xlsx/xlsx.full.min.js"></script>

2、使用

2.1、后端返回数据：

const data = [
  {
    name: 'John Doe',
    age: 30,
    gender: 'Male'
  },
  {
    name: 'Jane Doe',
    age: 25,
    gender: 'Female'
  },
  {
    name: 'Bob Smith',
    age: 40,
    gender: 'Male'
  }
];

2.2、引入插件

<script>
import { getData } from '@/api/indexs/index.js'; //api
import * as XLSX from "xlsx" //引入 xlsx 库，将数据转换为 Excel 并下载

export default { }
</script>

2.3、具体步骤：

1、使用XLSX.utils.json_to_sheet方法将JSON对象转换为worksheet对象。

2、再创建一个新的workbook对象，并使用XLSX.utils.book_append_sheet方法将worksheet对象添加到workbook中。

3、最后使用XLSX.writeFile方法将workbook导出为Excel文件：

2.4、完整 vue 文件

<template>
  <div>
    <el-button @click="exportExcel">点击导出Excel</el-button>
  </div>
</template>

<script>
import * as XLSX from "xlsx" //引入 xlsx 库，将数据转换为 Excel 并下载
export default {
  methods: {
    exportExcel () {
      const data_0 = [
        {
          name: 'John Doe',
          age: 30,
          gender: 'Male'
        },
        {
          name: 'Jane Doe',
          age: 25,
          gender: 'Female'
        },
        {
          name: 'Bob Smith',
          age: 40,
          gender: 'Male'
        }
      ];

      // 把Excel表头换成中文
      let data = data_0.map(obj => ({
        "姓名": obj.name,
        "年龄": obj.age,
        "性别": obj.gender,
      }));

      // 将数据转换为 worksheet 对象
      const worksheet = XLSX.utils.json_to_sheet(data);

      // 将 worksheet 对象添加到 workbook 中
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

      // 导出 Excel 文件
      XLSX.writeFile(workbook, '测试Excel导出.xlsx');
    }
  },
}
</script>

<style scoped></style>

前端如何把后端返回json数据，导入到Excel中，并在浏览器下载导出