xlsx冻结单元格

说明

因为最近需要实现前端导出 excel 文件，并且对导出文件的样式进行一些修改，比如颜色、字体、合并单元格等，所以我找到了xlsx-style这个项目，它可以对导出的 excel 文件进行一些样式上的修改，这个项目是SheetJs的一个分支。其实SheetJs也是支持修改导出文件的样式的，不过是在它的专业版中， SheetJs 分为社区版和专业版，社区版是开源的，但是却不支持修改导出文件的样式，专业版拥有更多的功能，这其中就包括修改样式，但是如果需要使用专业版，要邮件联系SheetJS 的开发者，去咨询价格，购买它。

另外可以exceljs也可以实现冻结单元格功能，具体可以自行查看说明文档，这里主要介绍xlsx在社区版的情况下如何改造支持冻结单元格功能。

我这里是纯js改造

安装

npm install xlsx xlsx-style --save

准备工作

复制文件

在node_modules/xlsx/dist文件中复制文件：xlsx-extendscript.js

我安装的xlsx的版本是0.18.5

新建纯前端js项目

新建文件夹downExcelTest，将复制过来的文件放到downExcelTest文件夹中，并创建index.html文件

[email protected]

安装的xlsx的版本是0.18.5，index.html文件中只需要引入xlsx-extendscript.js即可

xlsx-extendscript.js找到write_ws_xml_sheetviews方法，下面是改造后的

function write_ws_xml_sheetviews(ws, opts, idx, wb) {
	var sview = ({workbookViewId:"0"});
	// $FlowIgnore
	if((((wb||{}).Workbook||{}).Views||[])[0]) sview.rightToLeft = wb.Workbook.Views[0].RTL ? "1" : "0";
	// 冻结窗口
	var pane = null;
	var freeze = ws['!freeze'];
	// console.log(freeze)
	if (freeze !== undefined) {
		pane = writextag('pane', null, {
			xSplit: freeze.xSplit, // 冻结列
			ySplit: freeze.ySplit, // 冻结行
			topLeftCell: freeze.topLeftCell, // 在未冻结区域的左上角显示的单元格，默认为第一个未冻结的单元格
			activePane: freeze.activePane,
			state: freeze.state || 'frozen'
		})
	}
	return writextag("sheetViews", writextag("sheetView", pane, sview), {});
}

在index.html下载方法中写入

// 冻结第一行和第一列：
worksheet['!freeze'] = {
       xSplit: "1",  //冻结列
       ySplit: "1",  //冻结行
       // topLeftCell: "B2",  //在未冻结区域的左上角显示的单元格，默认为第一个未冻结的单元格
       // activePane: "bottomLeft",
       state: "frozen"
}

完整代码

下面是index.html下载excel完整代码

    
    
    
    


    

        点击下载excel