飞刀博客

JavaScript实现前端导出Excel文件

类别:编程 日期:2022-06-16 评论:0

最近,给同学的公司做某信息化管理系统时候遇到一个在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

留言评论

天上的神明和星辰,人间的艺术与真纯,
我们所敬畏和景仰的,莫过于此。

推荐文章
软件作品
微信公号
  • 足球Plus微信公众号
最新留言
友情链接
推荐文章

天上的神明和星辰,人间的艺术与真纯,
我们所敬畏和景仰的,莫过于此。

软件作品
最新留言