正文

JavaScript轻松实现输出Excel文件：教你一步步用原生技术制作和导出Excel

/0 浏览量
0609

在Web开发中，有时候我们需要将数据导出为Excel文件，以便用户可以离线查看或编辑。使用JavaScript实现这一功能，不仅可以提升用户体验，还能减少服务器的负担。本文将带你一步步用原生技术制作和导出Excel文件。

准备工作

在开始之前，你需要准备以下工具和库：

  • Node.js：用于本地开发环境
  • npm：Node.js的包管理器
  • ExcelJS：一个基于JavaScript的库，用于创建和操作Excel文件

首先，安装ExcelJS：

npm install exceljs

创建Excel文件

使用ExcelJS库，我们可以轻松地创建Excel文件。以下是一个简单的例子：

const Excel = require('exceljs');

async function createExcel() {
  // 创建一个新的工作簿
  const workbook = new Excel.Workbook();
  // 添加一个工作表
  const worksheet = workbook.addWorksheet('数据表');
  // 添加表头
  worksheet.columns = [
    { header: '姓名', key: 'name', width: 30 },
    { header: '年龄', key: 'age', width: 20 },
    { header: '性别', key: 'gender', width: 20 }
  ];
  // 添加数据
  worksheet.addRows([
    { name: '张三', age: 25, gender: '男' },
    { name: '李四', age: 30, gender: '女' },
    { name: '王五', age: 28, gender: '男' }
  ]);
  // 保存文件
  await workbook.xlsx.writeFile('output.xlsx');
}

createExcel();

这段代码创建了一个名为output.xlsx的Excel文件，其中包含三个表格列：姓名、年龄和性别，以及三行数据。

导出Excel文件

将Excel文件保存到本地后，我们可以通过JavaScript将其导出为文件。以下是一个使用FileSaver库的例子：

const Excel = require('exceljs');
const FileSaver = require('file-saver');

async function exportExcel() {
  const workbook = new Excel.Workbook();
  const worksheet = workbook.addWorksheet('数据表');
  worksheet.columns = [
    { header: '姓名', key: 'name', width: 30 },
    { header: '年龄', key: 'age', width: 20 },
    { header: '性别', key: 'gender', width: 20 }
  ];
  worksheet.addRows([
    { name: '张三', age: 25, gender: '男' },
    { name: '李四', age: 30, gender: '女' },
    { name: '王五', age: 28, gender: '男' }
  ]);

  const buffer = await workbook.xlsx.writeBuffer();
  FileSaver.saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'output.xlsx');
}

exportExcel();

这段代码将Excel文件导出为output.xlsx文件，并保存到本地。

总结

通过以上步骤，你可以使用JavaScript和原生技术轻松地创建和导出Excel文件。在实际开发中，你可以根据需求调整代码，例如添加更多表格列、数据行或样式。希望这篇文章能帮助你更好地理解如何在Web开发中实现Excel文件的制作和导出。

-- 展开阅读全文 --