JavaScript 实现前端导出 Excel 文件

最近，给同学的公司做某信息化管理系统时候遇到一个在Web前端将页面信息导出为Excel表格文件的需求。

经过搜索，目前网络上该类的类库很多，使用最广的是SheetJS和exceljs两个，其中SheetJS经常被也被称作js-xlsx。

使用最广的SheetJS目前具有社区版（免费）和Pro版（收费）两个版本，我起初也是选用这个用户最多的类库，但是在开放过程中需要对导出的excel部分单元格内容的字体风格和背景色进行配置，可惜免费的社区版本不支持该功能，于是我就转而使用全面开源的exceljs进行开发了。

以下记录我的使用过程。

我这套系统没有使用vue这类基于npm类库管理的框架开发，所以我直接通过浏览器应用，但是在exceljs的最为可靠的“官网”（https://github.com/exceljs/exceljs）上没有找到编译好的js，于是只好将源码下到本地通过npm进行编译，如有网友因为要用exceljs看到这篇文章，需要直接使用，可以通过下面的链接下载，这个压缩包里面也包含了下面提到的polyfill和FileSaver两个js类库。

链接: https://pan.baidu.com/s/1fVssIY7Q9SLj2FoS8z9G-g?pwd=xw9k

提取码: xw9k

在exceljs之前，需要polyfill这个依赖库类来支持一些旧版本的浏览器。

将生成好的excel文件下载保存到本地，还要搭配FileSaver类库使用。

这两个文件在上面的分享链接中都有，最终的引用代码如下：

<script src="plugins/polyfill.js"></script>
<script src="plugins/exceljs.bare.js"></script>
<script src="plugins/FileSaver.min.js"></script>

引入js文件之后，就可以在自己需要执行导出命令的地方对将要导出的excel文件进行处理。

// 新建一个工作簿对象，这是excel文件的基本对象。
const workbook = new ExcelJS.Workbook();  
// 在建好的工作簿基础上新增一个页签，这里的“MySheetName”名字可以自定义。views选项可以对其属性进行配置。
const worksheet = workbook.addWorksheet("MySheetName", { views: [{ showGridLines: true }] });
// 添加一行数据，返回这个行对象，可以对这个行的具体属性的设置。
let titles = ["序号", "科目", "单价", "数量", "合计", "时间", "备注说明"];
const titleRow = worksheet.addRow(titles);
// 对新增好的行对象高度进行设置。
titleRow.height = 25;
// 遍历该行的单元格，对单元格进行设置设置
titleRow.eachCell(function (cell, colNumber) {
// 设置单元格边框样式，这里是四周都是细边框
    cell.border = { top: { style: "thin" }, left: { style: "thin" }, bottom: { style: "thin" }, right: { style: "thin" }};
// 设置单元格内容对其样式，这里设置居中，自动换行
    cell.alignment = { vertical: "middle", horizontal: "center", wrapText: true, };
});
// 设置文件名并下载到本地 - 这里用到FileSaver.js中的全局方法saveAs。
workbook.xlsx.writeBuffer()
    .then((buffer) => saveAs(new Blob([buffer]), "系统导出.xlsx"))
    .catch((err) => console.log("Error writing excel export", err));

上面的代码演示了新建一个Excel文件对象，然后下载到本地的一个基本流程。

在一行操作完成后，即可对下一行进行操作，该类库的addRow方法每次都是紧接着最后一行进行新增。

我个人在这次开发中还涉及了一些自定义设置，实现方法记录如下。

// 获取指定列对象，并其宽度
var colTemp = worksheet.getColumn(1)
colTemp.width = 50;
// 获取指定行对象，并其高度
var rowTemp = worksheet.getRow(2)
rowTemp**.height = 25;
// 增加空行
let nullRow = worksheet.addRow([""]);
// 通过填充白色前景色的方法消除这个空行四周默认的网格线
nullRow.eachCell(function (cell, colNumber) {
    cell.fill = { type: "pattern", pattern: "solid", fgColor: { argb: "FFFFFFFF" }, };
});
// 通过单元格位置获取指定的单元格对象，这里E8是表格中第8行的E列。
var myCell = worksheet.getCell("E8");
// 获取单元格对象后，可以对该单元格各种属性进行赋值操作
// 单元格赋值
myCell.value = "显示内容";
// 定义字号大小和加粗
myCell.font = {size: 16 , bold: true};

总体来说我这次的需求中没有用到太多的属性设置，如果读者朋友有其他个性需求，可以阅读该库的自有文档，令人欣慰的是这个库的文档已有热心网友将其翻译成中文了，非常方便查阅，

链接在这里：https://github.com/exceljs/exceljs/blob/master/README_zh.md