JS实现导出Excel和CSV文件操作

JS实现导出Excel和CSV文件是前端开发中经常遇到的需求之一。在这里，我将给出完整的操作步骤和两个示例。

准备工作

在实现导出Excel和CSV文件前，需要先引入相关的依赖库。常用的依赖库有FileSaver.js和xlsx.js。

<!-- 导入FileSaver.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.2/FileSaver.min.js"></script>

<!-- 导入xlsx.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/xlsx/0.16.9/xlsx.full.min.js"></script>

导出Excel文件

准备数据

首先，需要准备一个数据集合，可以是从服务器获取的JSON数据，也可以是手动定义的数据。

const data = [
  ['姓名', '年龄', '性别'],
  ['小明', 18, '男'],
  ['小红', 20, '女'],
  ['小刚', 22, '男']
];

定义导出Excel函数

接着，我们需要定义一个导出Excel的函数，该函数将使用xlsx.js模块生成Excel数据，并使用FileSaver.js库下载Excel文件。

function exportExcel(data, fileName) {
  // 创建Workbook
  const workbook = XLSX.utils.book_new();
  // 创建Worksheet
  const worksheet = XLSX.utils.aoa_to_sheet(data);
  // 将Worksheet添加到Workbook
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
  // 将Workbook转换为二进制数据
  const excelData = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
  // 文件保存
  const blob = new Blob([excelData], { type: 'application/vnd.ms-excel' });
  saveAs(blob, fileName);
}

调用导出Excel函数

最后，我们可以使用以上定义的函数，将数据导出为Excel文件。

exportExcel(data, 'test.xlsx');

导出CSV文件

准备数据

同样，我们需要准备一个数据集合，可以是从服务器获取的JSON数据，也可以是手动定义的数据。

const data = [
  ['姓名', '年龄', '性别'],
  ['小明', 18, '男'],
  ['小红', 20, '女'],
  ['小刚', 22, '男']
];

定义导出CSV函数

导出CSV文件与导出Excel文件的过程类似，唯一不同的是我们需要将数组转换为CSV格式。

function exportCSV(data, fileName) {
  // 将数据转化为CSV格式
  const csvData = data.map(line => line.join(',')).join('\n');
  // 创建Blob
  const blob = new Blob([csvData], { type: 'text/csv,charset=UTF-8' });
  // 文件保存
  saveAs(blob, fileName);
}

调用导出CSV函数

使用以上定义的函数，将数据导出为CSV文件。

exportCSV(data, 'test.csv');

以上，便是JS实现导出Excel和CSV文件操作的完整攻略。